/* ============================================================= */ /* Top-level comment: identifies this stylesheet for clarity */
 /* Fortress Fresh Specials Page Stylesheet – v1                */ /* Version label requested by you */
 /* ============================================================= */ /* End of header banner */

/* ==================== CUSTOM FONT ==================== */ /* Section: load custom brand font */
@font-face { /* Begin @font-face rule to define custom font */
  font-family: 'logo'; /* Name the custom font family for use in headings and logo */
  src: url('/fonts/OE.ttf') format('truetype'); /* Path to the local OE.ttf font file in TrueType format */
  font-weight: normal; /* Set default font weight for this face */
  font-style: normal;  /* Set default font style for this face */
} /* End @font-face */

/* ==================== GLOBAL RESET ==================== */ /* Section: baseline CSS resets */
* { box-sizing: border-box; } /* Include padding and border within the element's total width/height */
html { scroll-behavior: smooth; } /* Enable smooth scrolling for anchor link navigation */

/* ==================== BRAND COLOR TOKENS ==================== */ /* Section: CSS variables for consistent theming */
:root { /* Begin variable declarations */
  --brand-sky: #60a5fa;      /* Bright blue used in gradients and highlights */
  --brand-royal: #2563eb;    /* Deep royal blue used with gradients for depth */
  --brand-gold: #facc15;     /* Gold accent used for headings and key accents */
  --dark: #13233C;           /* Dark background color for the page */
  --light: #24344F;          /* Slightly lighter panel/card background color */
  --muted: #e6edf5;          /* Light text color for readability on dark backgrounds */
  --border: #3b4a63;         /* Border color used for subtle outlines and dividers */
  --shadow: 0 12px 34px rgba(0, 0, 0, 0.45); /* Default shadow for depth on dark UI */
} /* End variable declarations */

/* ==================== PAGE BASICS ==================== */ /* Section: base typography and background */
body { /* Begin body styles */
  margin: 0; /* Remove default browser margins to control layout precisely */
  font-family: 'Inter', Arial, sans-serif; /* Use Inter with safe fallbacks for clean typography */
  background: var(--dark); /* Apply brand dark background to the entire page */
  color: var(--muted); /* Set default text color to light for contrast */
  line-height: 1.6; /* Use comfortable line height for readability */
} /* End body styles */

/* Reusable centered container */ /* Section: standard content wrapper */
.container { /* Begin container styles */
  width: min(1100px, 92%); /* Limit maximum width while allowing small-screen padding */
  margin: 0 auto; /* Center the container horizontally */
} /* End container styles */

/* Sections with card-style background */ /* Section: base section styling */
.section { /* Begin section styles */
  padding: 80px 0; /* Provide vertical spacing above and below section content */
  background: var(--light); /* Use a slightly lighter background than the page for panels */
} /* End section styles */

/* Alternating background section for rhythm */ /* Section: alternate panel look */
.section.alt { /* Begin alternate section styles */
  background: linear-gradient(180deg, rgba(36,52,79,0.95), rgba(19,35,60,0.95)); /* Apply soft gradient for visual rhythm */
} /* End alternate section styles */

/* ==================== SECTION HEADERS ==================== */ /* Section: titles and subtitles */
.section-header { text-align: center; margin-bottom: 36px; } /* Center header content and add spacing below */
.section-header h2 { /* Begin h2 styling inside section headers */
  font-family: 'logo', sans-serif; /* Use custom logo font for branded headings */
  font-size: 2rem; /* Set a prominent but balanced heading size */
  margin: 0 0 8px; /* Remove top margin and add small bottom margin */
  color: var(--brand-gold); /* Use brand gold for high-visibility headings */
} /* End h2 styling */
.section-header p { margin: 0; color: var(--muted); } /* Keep subtitle tight and readable with muted color */

/* ==================== HEADER & NAVIGATION ==================== */ /* Section: sticky site header and navigation */
.site-header { /* Begin header bar styles */
  position: sticky; top: 0; z-index: 50; /* Keep the header fixed at top with stacking priority */
  background: rgba(19,35,60,0.85); /* Use translucent dark background for glassy effect */
  backdrop-filter: blur(8px); /* Apply blur for modern glassmorphism look */
  border-bottom: 2px solid rgba(250,204,21,0.35); /* Add gold-tinted bottom border for accent */
} /* End header bar styles */

.header-inner { /* Begin header inner grid layout */
  display: grid; /* Use CSS Grid for flexible header layout */
  grid-template-columns: auto 1fr auto; /* Define columns: logo | nav | phone CTA */
  align-items: center; /* Vertically center items within header */
  gap: 16px; /* Provide spacing between grid columns */
  padding: 14px 0; /* Add vertical padding for breathing room */
} /* End header inner grid */

.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } /* Lay out logo image and text inline with spacing */
.logo-img { /* Begin logo image styling */
  width: 50px; height: 50px; object-fit: cover; border-radius: 10px; /* Set consistent logo size and rounded corners */
  border: 2px solid var(--brand-gold); /* Outline logo with brand gold for emphasis */
} /* End logo image styling */
.logo-text { /* Begin logo text styling */
  font-family: 'logo', sans-serif; /* Apply custom brand font to text logo */
  font-size: 1.8rem; letter-spacing: 0.5px; /* Increase size and add slight tracking for polish */
  color: var(--brand-gold); /* Use brand gold color for logo text */
} /* End logo text styling */

.main-nav ul { /* Begin navigation list styling */
  list-style: none; margin: 0; padding: 0; /* Remove default list spacing */
  display: flex; gap: 20px; /* Horizontally lay out nav items with spacing */
} /* End navigation list styling */

.main-nav a { /* Begin navigation link styling */
  text-decoration: none; font-weight: 700; /* Remove underlines and make text bold */
  background: linear-gradient(135deg, var(--brand-sky), var(--brand-royal)); /* Apply blue gradient background to links */
  color: #ffffff; /* Use white text for contrast against gradient */
  padding: 8px 16px; border-radius: 999px; /* Create pill-shaped buttons for nav links */
  transition: transform 0.2s ease, opacity 0.2s ease; /* Smooth hover animations */
} /* End navigation link styling */
.main-nav a:hover { transform: translateY(-2px); opacity: 0.92; } /* Slightly lift and fade on hover for feedback */

.nav-toggle { /* Begin mobile menu toggle styling */
  display: none; /* Hide toggle on desktop screens */
  background: transparent; border: 2px solid var(--brand-gold); /* Outline the toggle with brand gold */
  color: #ffffff; /* White icon/text for visibility on dark header */
  padding: 6px 10px; border-radius: 8px; cursor: pointer; /* Shape and cursor for interactivity */
} /* End mobile toggle styling */

@media (max-width: 900px) { /* Begin responsive rules for narrower screens */
  .nav-toggle { display: inline-block; } /* Show the menu toggle button on mobile */
  .main-nav ul { /* Begin mobile nav list adjustments */
    display: none; /* Hide the list by default until toggled */
    position: absolute; right: 20px; top: 60px; /* Position dropdown under header */
    flex-direction: column; background: var(--light); /* Use panel background for dropdown */
    padding: 10px; border-radius: 10px; box-shadow: var(--shadow); /* Add rounded corners and shadow */
    border: 1px solid var(--border); /* Outline for definition */
  } /* End mobile nav list adjustments */
  .main-nav ul.open { display: flex; } /* Reveal the dropdown when the 'open' class is present */
} /* End responsive header rules */

/* ==================== SPECIALS (INDIVIDUAL BUNDLE CARDS) ==================== */ /* Section: bundle cards similar to service cards */
.services-grid { /* Begin grid layout for bundle cards */
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; /* Wrap cards and center them with spacing */
} /* End bundle card grid */

.card { /* Begin individual bundle card styling */
  background: var(--light); /* Use panel background for the card surface */
  border: 1px solid var(--border); /* Add subtle border for structure */
  border-radius: 12px; box-shadow: var(--shadow); /* Round corners and apply shadow for depth */
  padding: 16px; width: 300px; /* Provide interior spacing and fixed card width */
  text-align: center; /* Center text within the card */
  overflow: hidden; /* Hide any overflow to keep a tidy card shape */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Animate on hover for polish */
} /* End individual card styling */
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,0.5); } /* Lift card and deepen shadow on hover */

.card h4 { /* Begin bundle title styling inside a card */
  font-family: 'logo', sans-serif; /* Use brand font for bundle titles */
  color: var(--brand-gold); /* Apply gold color to emphasize the title */
  margin: 0.5rem 0; /* Add vertical spacing around the title */
  font-size: 1.2rem; /* Set a readable, prominent size for bundle names */
} /* End bundle title styling */

.card .price, .card .bundle-price, .price { /* Begin price styling (supports multiple class names) */
  font-weight: 700; /* Make price text bold for emphasis */
  font-size: 1.1rem; /* Slightly larger than body text for visibility */
  color: #ffffff; /* Use white for strong contrast on dark panels */
  margin-bottom: 10px; /* Add a small gap below the price */
} /* End price styling */

.card .package-details, .card .bundle-list, .package-details { /* Begin list styling (supports multiple class names) */
  list-style: disc; /* Use standard disc bullets */
  text-align: left; /* Align text left for easier reading of bullet points */
  padding-left: 20px; /* Indent bullets for proper hierarchy */
  color: var(--muted); /* Keep text readable with muted color */
  font-size: 0.95rem; /* Slightly smaller size to fit content neatly */
  line-height: 1.5; /* Provide comfortable spacing between list items */
  margin: 0; /* Remove default margins for clean layout */
} /* End list styling */
.card .package-details li, .card .bundle-list li, .package-details li { margin-bottom: 6px; } /* Space out bullet points for readability */

/* ==================== CONTACT SECTION ==================== */ /* Section: contact form and info panel styles */
.contact-grid { /* Begin contact two-column layout */
  display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; /* Place form and aside side by side with wrap */
} /* End contact layout */

.contact-form { /* Begin contact form panel */
  background: var(--light); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); /* Panel styling */
  padding: 20px; width: 450px; color: var(--muted); /* Set width and readable text color */
} /* End contact form panel */

.contact-form label { /* Begin label styling */
  font-weight: bold; display: block; margin-top: 10px; color: var(--muted); /* Emphasize labels and stack above inputs */
} /* End label styling */

.contact-form input, .contact-form select, .contact-form textarea { /* Begin form controls styling */
  width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px; margin-top: 5px; /* Full width inputs with padding */
  background: #1a2640; color: #eaf2fb; /* Dark background with light text for inputs */
} /* End inputs styling */

.contact-form input::placeholder, .contact-form textarea::placeholder { color: #b8c8de; } /* Apply soft placeholder color for readability */

.contact-form button { /* Begin submit button styling */
  margin-top: 15px; /* Add space above the button */
  background: linear-gradient(135deg, var(--brand-sky), var(--brand-royal)); /* Use brand gradient for call-to-action */
  border: none; color: #ffffff; padding: 12px 18px; border-radius: 999px; cursor: pointer; font-weight: bold; /* Style button for prominence */
  transition: transform 0.2s ease, opacity 0.2s ease; /* Animate on hover */
} /* End button styling */
.contact-form button:hover { opacity: 0.92; transform: translateY(-2px); } /* Slightly fade and lift the button on hover */

.contact-aside { /* Begin contact information panel */
  background: var(--light); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); /* Match panel style with form */
  padding: 20px; width: 450px; color: var(--muted); /* Set width and text color */
} /* End contact information panel */

.contact-aside h3 { /* Begin contact aside heading */
  font-family: 'logo', sans-serif; /* Use brand font for subheading */
  color: var(--brand-gold); /* Apply gold accent for emphasis */
  margin-top: 0; /* Remove default top margin for tight layout */
} /* End contact aside heading */

.contact-list { /* Begin contact list styling */
  list-style: none; padding: 0; margin: 0 0 14px; /* Remove bullets and add spacing below the list */
} /* End contact list */
.contact-list li + li { margin-top: 8px; } /* Add space between consecutive list items */

.social { /* Begin social links list styling */
  list-style: none; padding: 0; margin: 12px 0 0; display: flex; gap: 12px; /* Horizontal list with gaps */
} /* End social list */
.social a { color: #cfe1ff; text-decoration: none; font-weight: 600; } /* Style social links with light blue and semi-bold weight */
.social a:hover { text-decoration: underline; } /* Underline social links on hover for clarity */

/* ==================== FOOTER ==================== */ /* Section: site footer styling */
.site-footer { /* Begin footer styles */
  background: #0a1426; color: var(--muted); text-align: center; padding: 1rem 0; /* Dark footer with centered text */
  border-top: 4px solid var(--brand-gold); /* Gold stripe at top for brand consistency */
} /* End footer styles */

/* ==================== SCROLL-TO-TOP BUTTON ==================== */ /* Section: floating scroll-to-top control */
.scroll-top { /* Begin scroll-to-top button styling */
  position: fixed; right: 18px; bottom: 18px; width: 42px; height: 42px; border-radius: 50%; /* Fix button at bottom-right and make circular */
  border: 2px solid var(--brand-gold); background: var(--light); color: #ffffff; display: grid; place-items: center; /* Style and center arrow */
  box-shadow: var(--shadow); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; /* Fade/hover transitions */
} /* End scroll-to-top styling */
.scroll-top.show { opacity: 1; pointer-events: auto; transform: translateY(-4px); } /* Reveal button after scroll with slight lift */

/* ==================== RESPONSIVE TWEAKS ==================== */ /* Section: mobile-friendly adjustments */
@media (max-width: 900px) { /* Start rules for screens 900px wide and smaller */
  .services-grid { flex-direction: column; align-items: center; } /* Stack bundle cards vertically and center them */
  .card { width: 90%; max-width: 500px; } /* Let cards grow wider on small screens but cap maximum width */
  .contact-grid { flex-direction: column; align-items: center; } /* Stack contact form and info panel on mobile */
  .contact-form, .contact-aside { width: 90%; max-width: 500px; } /* Make contact panels responsive with a sensible max width */
} /* End mobile rules */