/* ===========================
   HEADER RULES
   =========================== */
/*
HEADER STRUCTURE:
- Margin-top: 0 (header is first element, no spacing above)
- Fixed padding: 12px top, 4px bottom
- Three-column grid: 30% logo | 30% phone | 40% navigation
- Gap between columns: 20px
- Logo max-width: 240px
- Phone image max-width: 250px
- Navigation: 2-column grid, 20px column gap, 0px row gap
- Navigation font: 11.2px, bold, black
- Navigation bullets: "• " before each item
- Navigation hover: #00a9e0
- Navigation alignment: right with 25px margin
THESE RULES APPLY TO ALL PAGES - DO NOT MODIFY
=========================== */

/* ===========================
   SECTION SPACING
   =========================== */
/*
RULE: 15px between all major sections
METHOD: Each major section has margin-top: 15px
APPLIES TO: main, .vision-section, .faq-section, .site-footer
DO NOT use padding or margin-bottom for section spacing
=========================== */

/* ===========================
   LEFT PANEL - CONTENT AREA RULES
   =========================== */
/*
STRUCTURE:
- Flex: 3 (grows to fill remaining space beside quote form)
- Background: white
- Padding: 20px right, 20px top, 0 left, 0 bottom
- No border

STANDARD INTERIOR PAGE PATTERN:
- H1: Page title, #00a9e0, 1.4rem, bold, 0 0 10px margin
- H2: Section headings, #00a9e0, 1.1rem, bold, 20px top 6px bottom margin (first H2: 0 top margin)
- Image: Full width, 4px border-radius, 12px bottom margin
- Paragraphs: 0.9rem, line-height 1.3, 12px bottom margin, black text
- Last paragraph: 0 bottom margin
- Lists (ul): 0.9rem, 12px bottom margin, 20px left padding
- List items (li): 0.9rem, line-height 1.3, 8px bottom margin, black text

NOTE: Each page has unique content in left panel
- Homepage: case studies + awards button (special layout)
- Interior pages: title + image + description text
- Privacy/About pages: h2 section headings + paragraphs + lists
Content varies by page, but spacing/typography rules remain consistent

LEFT PANEL MUST ALIGN HEIGHT WITH QUOTE FORM AREA
=========================== */

/* ===========================
   RIGHT PANEL - QUOTE FORM RULES
   =========================== */
/*
STRUCTURE:
- Fixed width: 350px max-width
- Background: #00a9e0
- Color: white text
- Padding: 20px all sides
- Border-radius: 8px
- Sticks to top (align-self: flex-start)

FORM ELEMENTS:
- Form layout: flex column, 12px gap between fields
- Inputs/textarea: white background, #00a9e0 placeholder text, 7px padding, 4px border-radius
- First/Last name: 2-column grid with 8px gap
- Service checkboxes: 2-column grid, white background, 10px padding, 4px border-radius
- Service label: "Service Type", #00a9e0 color, bold, 1rem, 0 margin
- Checkbox spacing: 5px gap
- Submit button: #00a9e0 background, white text, 2px white border, 7px/18px padding, bold

REQUIRED HIDDEN FIELDS:
- Page origin tracking: hidden input with page value
- Cloudflare tracking: hidden fields for utm parameters, gclid, referrer
- Honeypot: absolutely positioned off-screen field named "website"

HOVER STATES:
- Submit button hover: white background, #00a9e0 text

DO NOT MODIFY - FORM TRACKING REQUIRED FOR ALL PAGES
=========================== */

/* ===========================
   VISION SECTION - HOMEPAGE ONLY
   =========================== */
/*
STRUCTURE:
- Contains: heading + intro paragraph (products grid is now in .products-section)

HEADING:
- H2: "Goldrich Printpak Inc.: Our Vision, Our Values, Our Products"
- Color: #00a9e0, 1.6rem, bold, center-aligned
- Margin: 0 0 4px (tight spacing to intro paragraph)

INTRO PARAGRAPH:
- Font: 0.95rem, line-height 1.3, black text
- Margin: 0 0 10px
- Left-aligned

THIS SECTION DOES NOT APPEAR ON INTERIOR PAGES
=========================== */

/* ===========================
   PRODUCTS SECTION - HOMEPAGE ONLY
   =========================== */
/*
STRUCTURE:
- Contains: 4-card product grid
- Sits immediately after .vision-section on desktop (margin-top: 0)
- On mobile: reordered after case studies

PRODUCT GRID:
- 2-column grid, 8px gap
- Each card: white background, 1px #e1e1e1 border, 8px border-radius
- Card padding: 10px top, 16px sides, 8px bottom
- Card structure: H3 + image + paragraph + "More >>" link

CARD ELEMENTS:
- H3: #00a9e0, 1.1rem, bold, 0 0 8px margin
- Image: full width, 4px border-radius, 8px bottom margin
- Paragraph: 0.9rem, line-height 1.3, 1px bottom margin, black text
- More link: #00a9e0, 0.9rem, bold, floated right, hover #0088b3

THIS SECTION DOES NOT APPEAR ON INTERIOR PAGES
=========================== */

/* ===========================
   FAQ SECTION - ALL PAGES
   =========================== */
/*
STRUCTURE:
- Contains: heading + 2-column grid of FAQ items
- Grid gap: 20px between columns

HEADING:
- H2: Section title (varies by page)
- Color: #00a9e0, 1.6rem, bold, center-aligned
- Margin: 0 0 12px (spacing to FAQ grid)

FAQ GRID:
- 2-column layout, equal width (1fr 1fr)
- Gap: 20px between columns

FAQ ITEM SPACING:
- Each item margin-bottom: 12px (spacing between Q&A pairs)

FAQ QUESTION:
- H3: #00a9e0, 1.05rem, bold
- Margin: 0 0 4px (spacing to answer)

FAQ ANSWER:
- Paragraph: 0.9rem, line-height 1.3, black text
- Margin: 0

CONSISTENCY RULE: All FAQ sections use identical spacing regardless of page
=========================== */

/* ===========================
   PREV/NEXT NAVIGATION - CORE 6 PAGES ONLY
   =========================== */
/*
STRUCTURE:
- Horizontal navigation between core packaging pages
- Center-aligned
- Separator between prev and next links

APPLIES TO:
- Food Packaging
- Pharma Packaging  
- Cosmetics Packaging
- Alcohol Packaging
- Custom Packaging
- Custom Printing

ELEMENTS:
- Prev link: "‹ Prev", #00a9e0, hover effect
- Separator: "—" between links, #00a9e0
- Next link: "Next ›", #00a9e0, hover effect
- All text bold, consistent font size

LAYOUT:
- Center-aligned container
- Inline display with spacing between elements

THIS SECTION DOES NOT APPEAR ON HOMEPAGE OR OTHER PAGES
=========================== */

/* ===========================
   FOOTER - ALL PAGES
   =========================== */
/*
STRUCTURE:
- Background: #f5f5f5
- Border-top: 1px solid #e1e1e1
- Padding: 16px top/bottom, 0 sides
- Two-column layout: copyright left, links right

LEFT COLUMN:
- Copyright text with dynamic year
- Font: 0.75rem, black text
- Format: "© [YEAR] Goldrich Printpak Inc. Custom Packaging Services Toronto."

RIGHT COLUMN:
- Navigation links separated by bullets (•)
- Font: 0.75rem, black text
- Links: black default, #00a9e0 hover
- Spacing: bullets with non-breaking spaces (\00A0•\00A0)

FOOTER LINKS (COMMON TO ALL PAGES):
- Awards
- Testimonials  
- Certifications
- About
- Contact
- Privacy
- Glossary
- Sitemap

LAYOUT:
- Flexbox: space-between alignment
- Wraps on small screens
- 16px gap between columns

MOBILE CHANGES (@media max-width: 768px):
- Stack vertically (flex-direction: column)
- Center-align text
- Reduce gap to 8px
- Remove Awards, Testimonials, Certifications links (display: none)
- Remaining links: About • Contact • Privacy • Glossary • Sitemap
- Link font-size: 0.7rem

FOOTER IS IDENTICAL ACROSS ALL PAGES
=========================== */

/* ===========================
   COOKIE CONSENT BANNER
   =========================== */
/*
STRUCTURE:
- Fixed position overlay covering full viewport
- Semi-transparent dark background (rgba(0,0,0,0.45))
- White card centered at bottom
- Z-index: 99999

CARD LAYOUT:
- Max-width: 720px (or 100% on small screens)
- Background: white
- Border-radius: 12px
- Padding: 16px
- Box-shadow for depth

CONTENT:
- Heading: "Cookies", #00a9e0
- Description text explaining necessary/analytics cookies
- Three buttons: Decline, Preferences, Accept All
- Optional preferences panel (toggles on/off)

BUTTONS:
- Primary (Accept All): #00a9e0 background, white text
- Secondary (Decline/Preferences): white background, #00a9e0 text
- All buttons: 2px solid #00a9e0 border, 10px/14px padding, bold

PREFERENCES PANEL:
- Shows when Preferences clicked
- Necessary checkbox: checked, disabled
- Analytics checkbox: user toggleable
- Border: 1px solid #e1e1e1

BEHAVIOR (JavaScript required):
- Uses localStorage key "siteConsent_v1"
- Tracks: necessary (always true), analytics (user choice)
- Hidden by default if consent already stored
- Body gets "cc-locked" class when banner visible

MOBILE CHANGES:
- Card padding: 24px
- Buttons stack vertically (flex-direction: column)
- Buttons full width

THIS IS A FUNCTIONAL COMPONENT - DO NOT MODIFY WITHOUT TESTING
=========================== */

/* ===========================
   JSON-LD STRUCTURED DATA
   =========================== */
/*
LOCATION: In <head> section of HTML, after meta tags, before closing </head>

STRUCTURE:
- Script tag: type="application/ld+json"
- Contains @graph array with multiple schema objects

REQUIRED SCHEMAS:
1. Organization (@type: "Organization")
   - Company name, logo, founding date, contact info
   - Address, telephone, areas served
   - Same across all pages

2. WebSite (@type: "WebSite")  
   - Site URL, name, publisher reference
   - Language: en-CA
   - Same across all pages

3. FAQPage (@type: "FAQPage") - VARIES BY PAGE
   - Each page has unique questions/answers
   - Questions must match visible FAQ content exactly
   - Answers are concise versions of visible content

OPTIONAL SCHEMA:
4. Review (@type: "Review") - MAY INCLUDE TESTIMONIALS
   - Customer testimonials with ratings
   - Reviewer name, review body, rating value
   - Date published
   - Only include if testimonials exist on page

PAGE-SPECIFIC FAQ CONTENT:
- Homepage: General company/service questions
- Food Packaging: Food-specific questions
- Pharma Packaging: Pharma-specific questions
- Cosmetics Packaging: Cosmetics-specific questions
- Alcohol Packaging: Alcohol-specific questions
- Custom Packaging: Custom packaging questions
- Custom Printing: Printing-specific questions

VALIDATION REQUIRED:
- Test all JSON-LD with Google Rich Results Test
- Ensure no syntax errors
- Verify FAQ content matches visible page content

THIS IS NOT CSS - THIS IS HTML/STRUCTURED DATA
DO NOT MODIFY WITHOUT SCHEMA.ORG VALIDATION
=========================== */


/* ===========================
   RESET + BASE STYLES
   =========================== */
/*
RESET:
- Box-sizing: border-box for all elements (*, *::before, *::after)
- Body margin: 0
- Image display: block, max-width 100%, height auto

TYPOGRAPHY:
- Font-family: Arial, Helvetica, sans-serif (all pages)
- Body color: #1a1a1a
- Line-height: 1.3 (global default)
- Background: white

LINKS:
- Default color: #000000 (black)
- No underline
- Hover/focus color: #00A9CF (light blue)
- No underline on hover

THESE ARE GLOBAL DEFAULTS - APPLY TO ALL PAGES
=========================== */

/* ===========================
   GLOBAL CONTAINER
   =========================== */
/*
STRUCTURE:
- Max-width: 990px
- Centered: margin 0 auto
- Padding: 0 20px 0 0 (right padding only)

APPLIES TO:
- All major content sections
- Wraps header, main, vision, faq, footer content

THIS CONTAINER IS CONSISTENT ACROSS ALL PAGES
=========================== */

/* ===========================
   MAIN SECTION LAYOUT
   =========================== */
/*
STRUCTURE:
- Flexbox layout: left panel + right quote form
- Gap: 32px between panels
- Margin-bottom: 0 (spacing handled by section spacing rule)

LEFT PANEL:
- Flex: 3 (takes 3/4.5 of available space)
- See "LEFT PANEL - CONTENT AREA RULES" for content rules

RIGHT PANEL:
- Flex: 1.5 (takes 1.5/4.5 of available space)
- Max-width: 350px
- See "RIGHT PANEL - QUOTE FORM RULES" for content rules

THIS LAYOUT APPLIES TO ALL PAGES (HOMEPAGE + INTERIOR)
=========================== */

/* ===========================
   RESET + BASE STYLES
   =========================== */
/*
RESET:
- Box-sizing: border-box for all elements (*, *::before, *::after)
- Body margin: 0
- Image display: block, max-width 100%, height auto

TYPOGRAPHY:
- Font-family: Arial, Helvetica, sans-serif (all pages)
- Body color: #1a1a1a
- Line-height: 1.3 (global default)
- Background: white

LINKS:
- Default color: #000000 (black)
- No underline
- Hover/focus color: #00A9CF (light blue)
- No underline on hover

THESE ARE GLOBAL DEFAULTS - APPLY TO ALL PAGES
=========================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #1a1a1a;
  background: #ffffff;
  line-height: 1.3;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: #000000;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #00A9CF;
  text-decoration: none;
}

/* ===========================
   GLOBAL CONTAINER
   =========================== */
/*
STRUCTURE:
- Max-width: 990px
- Centered: margin 0 auto
- Padding: 0 20px 0 0 (right padding only)

APPLIES TO:
- All major content sections
- Wraps header, main, vision, faq, footer content

THIS CONTAINER IS CONSISTENT ACROSS ALL PAGES
=========================== */

.container {
  max-width: 990px;
  margin: 0 auto;
  padding: 0 20px 0 0;
}

/* ===========================
   SECTION SPACING
   =========================== */
/*
RULE: 15px between all major sections
METHOD: Each major section has margin-top: 15px
APPLIES TO: main, .vision-section, .faq-section, .site-footer
DO NOT use padding or margin-bottom for section spacing
=========================== */

main,
.vision-section,
.faq-section,
.site-footer {
  margin-top: 15px;
}

/* Products section sits flush under vision-section on desktop */
.products-section {
  margin-top: 0;
}

/* ===========================
   HEADER RULES
   =========================== */
/*
HEADER STRUCTURE:
- Margin-top: 0 (header is first element, no spacing above)
- Fixed padding: 12px top, 4px bottom
- Three-column grid: 30% logo | 30% phone | 40% navigation
- Gap between columns: 20px
- Logo max-width: 240px
- Phone image max-width: 250px
- Navigation: 2-column grid, 20px column gap, 0px row gap
- Navigation font: 11.2px, bold, black
- Navigation bullets: "• " before each item
- Navigation hover: #00a9e0
- Navigation alignment: right with 25px margin
THESE RULES APPLY TO ALL PAGES - DO NOT MODIFY
=========================== */

.site-header {
  background: #ffffff;
  border-bottom: none;
  padding: 12px 0 4px;
  margin-top: 0;
}

.header-inner {
  display: grid;
  grid-template-columns: 30% 30% 40%;
  gap: 20px;
  align-items: center;
}

.header-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.header-left .logo {
  max-width: 240px;
  height: auto;
}

.header-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-center .phone-image {
  max-width: 250px;
  height: auto;
}

.header-services {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 25px;
}

.header-services ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 0px;
}

.header-services li {
  font-size: 11.2px;
  font-weight: 700;
  color: #000000;
}

.header-services li::before {
  content: "• ";
  font-weight: 700;
  color: #000000;
}

.header-services li a {
  color: inherit;
  text-decoration: none;
}

.header-services li a:hover {
  color: #00a9e0;
}

/* ===========================
   MAIN SECTION LAYOUT
   =========================== */
/*
STRUCTURE:
- Flexbox layout: left panel + right quote form
- Gap: 32px between panels
- Margin-bottom: 0 (spacing handled by section spacing rule)

LEFT PANEL:
- Flex: 3 (takes 3/4.5 of available space)
- See "LEFT PANEL - CONTENT AREA RULES" for content rules

RIGHT PANEL:
- Flex: 1.5 (takes 1.5/4.5 of available space)
- Max-width: 350px
- See "RIGHT PANEL - QUOTE FORM RULES" for content rules

THIS LAYOUT APPLIES TO ALL PAGES (HOMEPAGE + INTERIOR)
=========================== */

main {
  display: block;
}

.intro-and-form {
  display: flex;
  gap: 32px;
  margin-bottom: 0;
}

/* ===========================
   LEFT PANEL - CONTENT AREA RULES
   =========================== */
/*
STRUCTURE:
- Flex: 3 (grows to fill remaining space beside quote form)
- Background: white
- Padding: 20px right, 20px top, 0 left, 0 bottom
- No border

STANDARD INTERIOR PAGE PATTERN:
- H1: Page title, #00a9e0, 1.4rem, bold, 0 0 10px margin
- Image: Full width, 4px border-radius, 12px bottom margin
- Paragraphs: 0.9rem, line-height 1.3, 12px bottom margin, black text
- Last paragraph: 0 bottom margin

NOTE: Each page has unique content in left panel
- Homepage: case studies + awards button (special layout)
- Interior pages: title + image + description text
Content varies by page, but spacing/typography rules remain consistent

LEFT PANEL MUST ALIGN HEIGHT WITH QUOTE FORM AREA
=========================== */

.intro-panel {
  flex: 3;
  background: #ffffff;
  padding: 20px 0 0 0;
  border: none;
}

.intro-panel h1 {
  margin: 0 0 10px;
  color: #00a9e0;
  font-size: 1.6rem;
  font-weight: 700;
}

.intro-panel p {
  margin: 0 0 12px;
  color: #000000;
  font-size: 0.9rem;
  line-height: 1.3;
}

.intro-panel p:last-of-type {
  margin-bottom: 0;
}

/* Glossary term styling */
.glossary-term {
  color: #00a9e0;
  font-weight: bold;
}

/* Certification item layout - image left, text right */
.cert-item {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  align-items: flex-start;
}

.cert-item img {
  flex: 0 0 auto;
  max-width: 150px;
  margin-bottom: 0;
  margin-top: 2rem;
}

.cert-item p {
  margin-bottom: 12px;
}

.cert-item p:last-child {
  margin-bottom: 0;
}

.cert-item > div {
  flex: 1;
}

.intro-panel h2 {
  color: #00a9e0;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 20px 0 6px;
  line-height: 1.3;
}

.intro-panel h2:first-of-type {
  margin-top: 0;
}

.intro-panel ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.intro-panel li {
  color: #000000;
  font-size: 0.9rem;
  line-height: 1.3;
  margin-bottom: 8px;
}

.intro-panel .case-image {
  margin-bottom: 12px;
}

.intro-panel .case-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* ===========================
   RIGHT PANEL - QUOTE FORM RULES
   =========================== */
/*
STRUCTURE:
- Fixed width: 350px max-width
- Background: #00a9e0
- Color: white text
- Padding: 20px all sides
- Border-radius: 8px
- Sticks to top (align-self: flex-start)

FORM ELEMENTS:
- Form layout: flex column, 12px gap between fields
- Inputs/textarea: white background, #00a9e0 placeholder text, 7px padding, 4px border-radius
- First/Last name: 2-column grid with 8px gap
- Service checkboxes: 2-column grid, white background, 10px padding, 4px border-radius
- Service label: "Service Type", #00a9e0 color, bold, 1rem, 0 margin
- Checkbox spacing: 5px gap
- Submit button: #00a9e0 background, white text, 2px white border, 7px/18px padding, bold

REQUIRED HIDDEN FIELDS:
- Page origin tracking: hidden input with page value
- Cloudflare tracking: hidden fields for utm parameters, gclid, referrer
- Honeypot: absolutely positioned off-screen field named "website"

HOVER STATES:
- Submit button hover: white background, #00a9e0 text

DO NOT MODIFY - FORM TRACKING REQUIRED FOR ALL PAGES
=========================== */

.quote-panel {
  flex: 1.5;
  background: #00a9e0;
  color: #ffffff;
  max-width: 350px;
  align-self: flex-start;
  border-radius: 8px;
  padding: 20px;
}

.quote-panel h2 {
  margin: 0 0 0px;
  color: #ffffff;
  text-align: center;
}

.quote-panel h4 {
  margin: 0 0 12px;
  color: #000000;
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
}

.quote-panel form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.form-row input {
  min-width: 0;
}

.quote-panel input[type="text"],
.quote-panel input[type="email"],
.quote-panel input[type="tel"],
.quote-panel textarea {
  padding: 7px;
  border-radius: 4px;
  border: none;
  font-size: 0.9rem;
  background: #ffffff;
}

.quote-panel input::placeholder,
.quote-panel textarea::placeholder {
  color: #00a9e0;
}

.quote-panel textarea {
  resize: vertical;
  font-size: 0.9rem;
  font-family: Arial, Helvetica, sans-serif;
}

.hp-field {
  position: absolute;
  left: -9999px;
}

.service-label {
  grid-column: 1 / -1;
  margin: 0 0 2px 0;
  color: #00a9e0;
  font-weight: 700;
  font-size: 1rem;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  background: #ffffff;
  padding: 10px;
  border-radius: 4px;
}

.checkbox-grid label {
  display: flex;
  align-items: center;
  color: #00a9e0;
  font-size: 0.8rem;
  white-space: nowrap;
}

.checkbox-grid input[type="checkbox"] {
  margin-right: 6px;
  accent-color: #00a9e0;
}

.quote-panel button[type="submit"] {
  margin-top: 4px;
  padding: 7px 18px;
  border-radius: 4px;
  border: 2px solid #ffffff;
  background: #00a9e0;
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}

.quote-panel button[type="submit"]:hover {
  background: #ffffff;
  color: #00a9e0;
}

/* ===========================
   HOMEPAGE-SPECIFIC: CASE STUDIES
   =========================== */
/*
STRUCTURE (appears in left panel on homepage only):
- Two case studies above View Awards button
- Each case study contains: H2 title + award line + content flex layout

CASE STUDY SPACING:
- Margin-bottom: 8px between case studies

CASE STUDY TITLE:
- H2: #00a9e0, 1.1rem, bold
- Margin: 0 0 0px

AWARD LINE:
- Paragraph with class "award-line"
- Color: #00a9e0, 0.85rem, regular weight
- Margin: 0 0 2px (forced with !important)

CASE CONTENT LAYOUT:
- Flexbox: text + image side-by-side
- Gap: 20px
- Align-items: flex-start
- Reverse class available for image-left layout

CASE TEXT:
- Flex: 1 (grows to fill space)
- Paragraph: 0.9rem, line-height 1.3, black, margin 0

CASE IMAGE:
- Flex: 0 0 150px (fixed width)
- Image: full width, 4px border-radius

HOMEPAGE ONLY - DOES NOT APPEAR ON INTERIOR PAGES
=========================== */

.case-study {
  margin-bottom: 8px;
}

.case-study h2 {
  margin: 0 0 0px;
  color: #00a9e0;
  font-size: 1.1rem;
  font-weight: 700;
}

.case-study .award-line {
  margin: 0 0 2px !important;
  color: #00a9e0;
  font-size: 0.85rem;
  font-weight: 400;
}

.case-content {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.case-content.reverse {
  flex-direction: row-reverse;
}

.case-text {
  flex: 1;
}

.case-text p {
  margin: 0;
  color: #000000;
  font-size: 0.9rem;
  line-height: 1.3;
}

.case-image {
  flex: 0 0 150px;
}

.case-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* ===========================
   HOMEPAGE-SPECIFIC: VIEW AWARDS BUTTON
   =========================== */
/*
STRUCTURE:
- Container: center-aligned
- Margin: 5px top, 15px bottom
- Button links to awards.html

BUTTON STYLING:
- Display: inline-block
- Padding: 7px horizontal, 18px vertical
- Border: 2px solid #00a9e0
- Border-radius: 4px
- Background: white
- Color: #00a9e0
- Font: bold, 1rem
- No text decoration

HOVER STATE:
- Background: #00a9e0
- Color: white

SPACING NOTE:
- 15px bottom margin creates proper spacing to Vision section below

HOMEPAGE ONLY - DOES NOT APPEAR ON INTERIOR PAGES
=========================== */

.view-awards-container {
  text-align: center;
  margin-top: 5px;
  margin-bottom: 15px;
}

.view-awards-btn {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 4px;
  border: 2px solid #00a9e0;
  background: #ffffff;
  color: #00a9e0;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.view-awards-btn:hover {
  background: #00a9e0;
  color: #ffffff;
}

/* ===========================
   VISION SECTION - HOMEPAGE ONLY
   =========================== */
/*
STRUCTURE:
- Contains: heading + intro paragraph

HEADING:
- H2: "Goldrich Printpak Inc.: Our Vision, Our Values, Our Products"
- Color: #00a9e0, 1.6rem, bold, center-aligned
- Margin: 0 0 4px (tight spacing to intro paragraph)

INTRO PARAGRAPH:
- Font: 0.95rem, line-height 1.3, black text
- Margin: 0 0 10px
- Left-aligned

THIS SECTION DOES NOT APPEAR ON INTERIOR PAGES
=========================== */

.vision-section h2 {
  text-align: center;
  margin: 0 0 4px;
  color: #00a9e0;
  font-size: 1.6rem;
  font-weight: 700;
}

.vision-intro {
  margin: 0 0 10px;
  color: #000000;
  font-size: 0.9rem;
  line-height: 1.3;
  text-align: left;
}

.products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.product-card {
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  padding: 10px 16px 8px 16px;
  background: #ffffff;
  position: relative;
}

.product-card h3 {
  margin: 0 0 8px;
  color: #00a9e0;
  font-size: 1.1rem;
  font-weight: 700;
}

.product-card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 8px;
}

.product-card p {
  margin: 0 0 1px;
  color: #000000;
  font-size: 0.9rem;
  line-height: 1.3;
}

.product-card .more-link {
  color: #00a9e0;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  float: right;
}

.product-card .more-link:hover {
  color: #0088b3;
}

/* ===========================
   FAQ SECTION - ALL PAGES
   =========================== */
/*
STRUCTURE:
- Contains: heading + 2-column grid of FAQ items
- Grid gap: 20px between columns

HEADING:
- H2: Section title (varies by page)
- Color: #00a9e0, 1.6rem, bold, center-aligned
- Margin: 0 0 12px (spacing to FAQ grid)

FAQ GRID:
- 2-column layout, equal width (1fr 1fr)
- Gap: 20px between columns

FAQ ITEM SPACING:
- Each item margin-bottom: 12px (spacing between Q&A pairs)

FAQ QUESTION:
- H3: #00a9e0, 1.05rem, bold
- Margin: 0 0 4px (spacing to answer)

FAQ ANSWER:
- Paragraph: 0.9rem, line-height 1.3, black text
- Margin: 0

CONSISTENCY RULE: All FAQ sections use identical spacing regardless of page
=========================== */

.faq-section h2 {
  text-align: center;
  margin: 0 0 12px;
  color: #00a9e0;
  font-size: 1.6rem;
  font-weight: 700;
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.faq-item {
  margin-bottom: 12px;
}

.faq-item h3 {
  margin: 0 0 4px;
  color: #00a9e0;
  font-size: 1.1rem;
  font-weight: 700;
}

.faq-item p {
  margin: 0;
  color: #000000;
  font-size: 0.9rem;
  line-height: 1.3;
}

/* ===========================
   PREV/NEXT NAVIGATION - CORE 6 PAGES ONLY
   =========================== */
/*
STRUCTURE:
- Horizontal navigation between core packaging pages
- Center-aligned
- Separator between prev and next links

APPLIES TO:
- Food Packaging
- Pharma Packaging  
- Cosmetics Packaging
- Alcohol Packaging
- Custom Packaging
- Custom Printing

ELEMENTS:
- Prev link: "‹ Prev", #00a9e0, hover effect
- Separator: "—" between links, #00a9e0
- Next link: "Next ›", #00a9e0, hover effect
- All text bold, consistent font size

LAYOUT:
- Center-aligned container
- Inline display with spacing between elements

THIS SECTION DOES NOT APPEAR ON HOMEPAGE OR OTHER PAGES
=========================== */

.page-navigation {
  margin-top: 15px;
}

.nav-links {
  text-align: center;
}

.nav-prev,
.nav-next,
.nav-separator {
  color: #00a9e0;
  font-weight: 700;
  font-size: 1rem;
  margin: 0 8px;
}

.nav-prev:hover,
.nav-next:hover {
  color: #0088b3;
}

/* ===========================
   FOOTER - ALL PAGES
   =========================== */
/*
STRUCTURE:
- Background: #f5f5f5
- Border-top: 1px solid #e1e1e1
- Padding: 16px top/bottom, 0 sides
- Two-column layout: copyright left, links right

LEFT COLUMN:
- Copyright text with dynamic year
- Font: 0.75rem, black text
- Format: "© [YEAR] Goldrich Printpak Inc. Custom Packaging Services Toronto."

RIGHT COLUMN:
- Navigation links separated by bullets (•)
- Font: 0.75rem, black text
- Links: black default, #00a9e0 hover
- Spacing: bullets with non-breaking spaces (\00A0•\00A0)

FOOTER LINKS (COMMON TO ALL PAGES):
- Awards
- Testimonials  
- Certifications
- About
- Contact
- Privacy
- Glossary
- Sitemap

LAYOUT:
- Flexbox: space-between alignment
- Wraps on small screens
- 16px gap between columns

FOOTER IS IDENTICAL ACROSS ALL PAGES
=========================== */

.site-footer {
  background: #f5f5f5;
  border-top: 1px solid #e1e1e1;
  padding: 16px 0;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-left p {
  margin: 0;
  font-size: 0.75rem;
  color: #000000;
}

.footer-right p {
  margin: 0;
  font-size: 0.75rem;
  color: #000000;
}

.footer-right a {
  color: #000000;
  text-decoration: none;
  margin: 0;
}

.footer-right a:hover {
  color: #00a9e0;
}

/* ===========================
   COOKIE CONSENT BANNER
   =========================== */
/*
STRUCTURE:
- Fixed position overlay covering full viewport
- Semi-transparent dark background (rgba(0,0,0,0.45))
- White card centered at bottom
- Z-index: 99999

CARD LAYOUT:
- Max-width: 720px (or 100% on small screens)
- Background: white
- Border-radius: 12px
- Padding: 16px
- Box-shadow for depth

CONTENT:
- Heading: "Cookies", #00a9e0
- Description text explaining necessary/analytics cookies
- Three buttons: Decline, Preferences, Accept All
- Optional preferences panel (toggles on/off)

BUTTONS:
- Primary (Accept All): #00a9e0 background, white text
- Secondary (Decline/Preferences): white background, #00a9e0 text
- All buttons: 2px solid #00a9e0 border, 10px/14px padding, bold

PREFERENCES PANEL:
- Shows when Preferences clicked
- Necessary checkbox: checked, disabled
- Analytics checkbox: user toggleable
- Border: 1px solid #e1e1e1

BEHAVIOR (JavaScript required):
- Uses localStorage key "siteConsent_v1"
- Tracks: necessary (always true), analytics (user choice)
- Hidden by default if consent already stored
- Body gets "cc-locked" class when banner visible

THIS IS A FUNCTIONAL COMPONENT - DO NOT MODIFY WITHOUT TESTING
=========================== */

body.cc-locked {
  overflow: hidden;
}

body.cc-locked > *:not(#cookie-consent) {
  filter: blur(5px);
  pointer-events: none;
}

#cookie-consent {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,0.45);
  z-index: 99999;
}

#cookie-consent.cc-hidden {
  display: none;
}

.cc-card {
  width: min(720px, 100%);
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

#cc-title {
  color: #00a9e0;
  margin: 0 0 8px;
}

.cc-text {
  margin: 0 0 12px;
  line-height: 1.35;
  color: #000000;
}

.cc-prefs {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #e1e1e1;
  border-radius: 10px;
}

.cc-prefs.cc-hidden {
  display: none;
}

.cc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}

.cc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}

.cc-btn {
  border: 2px solid #00a9e0;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
}

.cc-primary {
  background: #00a9e0;
  color: #ffffff;
}

.cc-secondary {
  background: #ffffff;
  color: #00a9e0;
}
/* ===========================
   HAMBURGER MENU (MOBILE ONLY)
   =========================== */

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 25px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
}

.hamburger span {
  width: 30px;
  height: 3px;
  background: #00a9e0;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100vh;
  background: #ffffff;
  box-shadow: -2px 0 10px rgba(0,0,0,0.1);
  z-index: 1000;
  overflow-y: auto;
  transition: right 0.3s ease;
  padding-top: 80px;
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 20px 0;
}

.mobile-menu li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #e1e1e1;
}

.mobile-menu li::before {
  content: none;
}

.mobile-menu a {
  display: block;
  padding: 15px 25px;
  color: #00a9e0;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  transition: background 0.2s ease;
}

.mobile-menu a:hover {
  background: #f5f5f5;
  color: #0088b3;
}

.menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.menu-overlay.active {
  display: block;
  opacity: 1;
}

/* ===========================
   MOBILE RULES @media (max-width: 768px)
   =========================== */
/*
CRITICAL: Each page must be individually tested and tailored
NO FRANKEN FILES - All rules must be intentional and documented
=========================== */

@media (max-width: 768px) {

  /* Global stability */
  html, body { 
    max-width: 100%; 
    overflow-x: hidden; 
  }
  
  img, iframe, video { 
    max-width: 100%; 
    height: auto; 
  }

  /* Unified gutter */
  .site-header,
  main,
  .vision-section,
  .products-section,
  .faq-section,
  .site-footer { 
    padding-left: 16px; 
    padding-right: 16px; 
  }

  .site-header .container,
  main .container,
  .vision-section .container,
  .products-section .container,
  .faq-section .container,
  .site-footer .container { 
    padding-left: 0; 
    padding-right: 0; 
  }

  /* Vision section needs extra top spacing */
  .vision-section {
    padding-top: 16px;
  }

  /* Main section mobile spacing */
  main {
    margin-top: 0 !important;
  }

  /* ===========================
     HOMEPAGE MOBILE SECTION REORDER
     Order: header > vision > quote form > case studies > products > faq > footer
     =========================== */

  body.home-page {
    display: flex;
    flex-direction: column;
  }

  body.home-page .site-header {
    order: 1;
  }

  body.home-page .vision-section {
    order: 2;
  }

  body.home-page main {
    order: 3;
  }

  body.home-page .products-section {
    order: 4;
  }

  body.home-page .faq-section {
    order: 5;
  }

  body.home-page .site-footer {
    order: 6;
  }

  body.home-page #cookie-consent {
    order: 7;
  }

  /* Inside main: quote panel first, case studies second */
  body.home-page .quote-panel {
    order: 1;
  }

  body.home-page .intro-panel {
    order: 2;
  }

  /* Header: logo + phone + hamburger on one line */
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    text-align: left;
  }

  .header-left .logo { 
    max-width: 160px; 
  }
  
  .header-center .phone-image { 
    max-width: 170px; 
  }

  .header-center {
    flex: 0 0 auto !important;
  }

  .hamburger { 
    display: flex; 
    margin-left: -12px; 
  }
  
  .header-services { 
    display: none; 
  }

  /* Mobile menu */
  .mobile-menu { 
    display: block; 
  }

  .mobile-menu a { 
    color: #00a9e0; 
  }
  
  .mobile-menu a:hover,
  .mobile-menu a:focus { 
    color: #0088b3; 
  }

  /* Layout stacks */
  .intro-and-form { 
    flex-direction: column;
    gap: 16px !important;
  }

  .intro-panel {
    padding-top: 8px !important;
  }

  .quote-panel {
    margin-top: 0;
  }

  .products-grid { 
    grid-template-columns: 1fr; 
  }
  
  .faq-grid { 
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Case study: image before copy inside case-content */
  .case-content,
  .case-content.reverse { 
    flex-direction: column;
    gap: 6px !important;
  }

  .case-content > .case-image,
  .case-content.reverse > .case-image {
    order: 1;
    width: 100%;
    margin: 0;
    flex: 0 0 auto;
  }

  .case-content > .case-text,
  .case-content.reverse > .case-text {
    order: 2;
  }

  /* Mobile copy swaps (visual only) */
  .case-study:first-of-type h2,
  .case-study:nth-of-type(2) .award-line,
  .faq-section h2 {
    font-size: 0 !important;
    line-height: 0 !important;
  }

  /* Page-specific mobile H1 overrides */
  .home-page .intro-panel h1,
  .cosmetics-page .intro-panel h1,
  .pharma-page .intro-panel h1,
  .food-page .intro-panel h1,
  .alcohol-page .intro-panel h1,
  .printing-page .intro-panel h1,
  .packaging-page .intro-panel h1 {
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .home-page .intro-panel h1::before {
    content: "Award-Winning Innovation";
    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 700;
    color: #00a9e0;
    display: block;
  }

  .cosmetics-page .intro-panel h1::before {
    content: "Custom Cosmetics Packaging";
    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 700;
    color: #00a9e0;
    display: block;
  }

  .pharma-page .intro-panel h1::before {
    content: "Custom Pharma Packaging";
    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 700;
    color: #00a9e0;
    display: block;
  }

  .food-page .intro-panel h1::before {
    content: "Custom Food Packaging";
    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 700;
    color: #00a9e0;
    display: block;
  }

  .alcohol-page .intro-panel h1::before {
    content: "Custom Alcohol Packaging";
    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 700;
    color: #00a9e0;
    display: block;
  }

  .printing-page .intro-panel h1::before {
    content: "Custom Printing & Design";
    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 700;
    color: #00a9e0;
    display: block;
  }

  .packaging-page .intro-panel h1::before {
    content: "Custom Packaging & Design";
    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 700;
    color: #00a9e0;
    display: block;
  }

  .case-study:first-of-type h2::before {
    content: "Dave's Hot Chicken Clamshells";
    font-size: 1.1rem;
    line-height: 1.2;
    font-weight: 700;
    color: #00a9e0;
    display: block;
  }

  .case-study:nth-of-type(2) .award-line::before {
    content: "PAC Global Awards – Package Design - 2024";
    font-size: 0.85rem;
    line-height: 1.2;
    font-weight: 400;
    color: #00a9e0;
    display: block;
  }

  .home-page .faq-section h2::before {
    content: "Goldrich FAQ";
    font-size: 1.2rem;
    line-height: 1.25;
    font-weight: 700;
    color: #00a9e0;
    display: block;
  }

  .cosmetics-page .faq-section h2::before {
    content: "Cosmetics Packaging FAQ";
    font-size: 1.2rem;
    line-height: 1.25;
    font-weight: 700;
    color: #00a9e0;
    display: block;
  }

  .pharma-page .faq-section h2::before {
    content: "Pharmaceutical Packaging FAQ";
    font-size: 1.2rem;
    line-height: 1.25;
    font-weight: 700;
    color: #00a9e0;
    display: block;
  }

  .food-page .faq-section h2::before {
    content: "Food Packaging FAQ";
    font-size: 1.2rem;
    line-height: 1.25;
    font-weight: 700;
    color: #00a9e0;
    display: block;
  }

  .alcohol-page .faq-section h2::before {
    content: "Alcohol Packaging FAQ";
    font-size: 1.2rem;
    line-height: 1.25;
    font-weight: 700;
    color: #00a9e0;
    display: block;
  }

  .printing-page .faq-section h2::before {
    content: "Custom Printing FAQ";
    font-size: 1.2rem;
    line-height: 1.25;
    font-weight: 700;
    color: #00a9e0;
    display: block;
  }

  .packaging-page .faq-section h2::before {
    content: "Custom Packaging FAQ";
    font-size: 1.2rem;
    line-height: 1.25;
    font-weight: 700;
    color: #00a9e0;
    display: block;
  }

  /* Vision section mobile */
  .vision-section h2 { 
    font-size: 1.2rem; 
    line-height: 1.25;
  }

  /* Footer mobile */
  .footer-content { 
    flex-direction: column; 
    text-align: center; 
    gap: 8px; 
  }

  /* Remove Awards/Testimonials/Certifications from footer on mobile */
  .site-footer a[href="awards.html"],
  .site-footer a[href="testimonials.html"],
  .site-footer a[href="certifications.html"] { 
    display: none !important; 
  }

  /* Rebuild separators with spaces */
  .site-footer .footer-right p { 
    font-size: 0; 
  }
  
  .site-footer .footer-right a { 
    font-size: 0.7rem; 
    display: inline-block; 
  }
  
  .site-footer .footer-right a::after { 
    content: "\00A0•\00A0"; 
  }
  
  .site-footer .footer-right a:last-child::after { 
    content: ""; 
  }

  /* Cookie consent mobile */
  .cc-card {
    padding: 24px;
    max-width: 95%;
  }

  #cc-title {
    font-size: 1.3rem;
  }

  .cc-actions {
    flex-direction: column;
  }

  .cc-btn {
    width: 100%;
  }

  /* Certifications page mobile */
  .cert-item img {
    margin-top: 0 !important;
    max-width: 100px !important;
  }

  /* Remove bottom margins from last image and paragraph before it */
  .intro-panel > img:last-child {
    margin-bottom: 0 !important;
  }

  .intro-panel > p:nth-last-child(2) {
    margin-bottom: 0 !important;
  }

}