/* D:\Hurricane Creek Automotive Website\gettamutt.com\static\css\customer_landing_page.css */
/*
  GettaMutt customer landing page styles
  - Uses gm-* namespaced classes so it layers cleanly on top of theme.css.
  - All user-visible text lives in customer_landing_page.html for translation; this file only shapes layout and visuals.
  - The navigation drawer is closed by default; .gm-nav-open on .gm-page-root slides the drawer in and pushes the main content.
*/

/* Logo banner wrapper at top of page content. */
.gm-logo-banner { text-align:center; margin:1.75rem 0 1.25rem; }

/* M.U.T.T. logo image kept compact and centered. */
.gm-logo-banner-img { display:inline-block; max-width:260px; width:100%; height:auto; }

/* Page root wrapper that holds header, shell, and footer. */
.gm-page-root { min-height:100vh; display:flex; flex-direction:column; }

/* Sticky header strip containing the menu toggle. */
.gm-header { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--border); background:var(--surface); }

/* Inner header layout with left-aligned menu button. */
.gm-header-inner { position:relative; max-width:none; margin:0; padding:.6rem 1.25rem; display:flex; align-items:center; }

/* Brand container in header (currently unused because logo sits in banner). */
.gm-brand { display:none; }

/* Brand logo image if header brand is re-enabled later. */
.gm-brand-logo { display:block; max-height:2.5rem; width:auto; }

/* Circular brand mark placeholder, hidden until needed. */
.gm-brand-mark { display:none; }

/* Brand text wrapper kept for translation but visually hidden in header. */
.gm-brand-text { display:none; }

/* Brand name typography (hidden in header for now). */
.gm-brand-name { font-weight:600; }

/* Brand tagline typography (hidden in header for now). */
.gm-brand-tagline { font-size:.8rem; color:var(--muted); }

/* Header actions group reserved for future controls. */
.gm-header-actions { display:none; }

/* Individual header navigation link styling. */
.gm-header-link { font-size:.9rem; text-decoration:none; }

/* Hamburger menu button at top-left of the page. */
.gm-menu-toggle { display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .65rem; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface-elevated); cursor:pointer; font-size:.85rem; }

/* Visual box for the hamburger icon lines. */
.gm-menu-icon { width:1.1rem; height:.75rem; position:relative; display:inline-block; }

/* Three-line hamburger drawn with one element and shadows. */
.gm-menu-icon::before { content:""; position:absolute; left:0; right:0; top:0; height:2px; border-radius:999px; background:currentColor; box-shadow:0 .25rem 0 currentColor, 0 .5rem 0 currentColor; }

/* Menu label text displayed next to the icon. */
.gm-menu-label { font-size:.85rem; }

/* Shell that contains the nav drawer and main content. */
.gm-shell { flex:1; display:flex; position:relative; overflow:hidden; }

/* Left-side nav drawer that slides in and out. */
.gm-nav-drawer { width:260px; flex-shrink:0; padding:1.5rem 1.25rem 2rem; border-right:1px solid var(--border); background:var(--surface-elevated); }

/* Drawer header wrapper around sidebar brand text. */
.gm-nav-header { margin-bottom:1.4rem; }

/* Brand name displayed in the navigation drawer. */
.gm-nav-brand-name { font-weight:600; display:block; }

/* Brand tagline displayed in the navigation drawer. */
.gm-nav-brand-tagline { font-size:.82rem; color:var(--muted); }

/* Sidebar section wrapper for grouped nav links. */
.gm-nav-section { margin-bottom:1.5rem; }

/* Sidebar section title label such as “Navigation”. */
.gm-nav-section-title { font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.55rem; }

/* List reset and layout for nav items. */
.gm-nav-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.4rem; }

/* Individual nav item wrapper. */
.gm-nav-item { }

/* Sidebar navigation link styling. */
.gm-nav-link { display:inline-flex; align-items:center; text-decoration:none; font-size:.9rem; }

/* Muted nav link style for lower-priority actions such as log out. */
.gm-nav-link-muted { color:var(--muted); }

/* Footer note text shown at the bottom of the drawer. */
.gm-nav-footer { font-size:.8rem; color:var(--muted); }

/* Main content container pushed right when the drawer opens. */
.gm-main { flex:1; padding:1.5rem 1.25rem 3rem; max-width:none; margin:0; }

/* Center column, slightly biased toward the left */
.gm-main-layout {
  max-width:1200px;
  margin-left:0rem;  /* how far from the left edge */
  margin-right:auto;   /* let the right side take up the extra space */
}

/* Wrapper around the central column that holds all primary page sections. */
.gm-main-body { }

/* Intro section wrapper for product title and lead. */
.gm-intro { margin-bottom:1.8rem; }

/* Narrower content width for intro copy. */
.gm-intro-inner { max-width:40rem; }

/* Main page title typography. */
.gm-intro-title { font-size:clamp(1.8rem,3vw,2.4rem); line-height:1.2; margin-bottom:.4rem; }

/* Intro lead paragraph styling. */
.gm-intro-lead { font-size:1rem; color:var(--muted); }

/* Two-column grid that separates product info and customer content. */
.gm-main-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1.1fr); gap:1.5rem; align-items:flex-start; }

/* Left column for product details and specs. */
.gm-main-left { display:flex; flex-direction:column; gap:1.25rem; }

/* Right column for quotes and photo galleries. */
.gm-main-right { display:flex; flex-direction:column; gap:1.25rem; }

/* Wrapper for product details section. */
.gm-product { }

/* Shared section header wrapper used across multiple areas. */
.gm-section-header { margin-bottom:.75rem; }

/* Section title heading styling. */
.gm-section-title { font-size:1.1rem; font-weight:600; }

/* Section subtitle descriptive text styling. */
.gm-section-subtitle { font-size:.9rem; color:var(--muted); }

/* Stack of product panels (images, videos, description). */
.gm-product-panels { display:flex; flex-direction:column; gap:1rem; }

/* General card styling for each product panel. */
.gm-product-panel { border-radius:.9rem; border:1px solid var(--border); padding:1rem 1.05rem; background:var(--surface-elevated); }

/* Grid wrapper for product image and video cards. */
.gm-card-grid-product { margin-top:.5rem; }

/* Title heading inside an individual product panel. */
.gm-product-panel-title { font-size:.96rem; font-weight:600; margin-bottom:.35rem; }

/* Paragraph body text inside product panels. */
.gm-product-panel-body { font-size:.9rem; color:var(--fg); }

/* Bullet list for key product specs or callouts. */
.gm-product-bullets { margin:.5rem 0 0; padding-left:1.2rem; font-size:.9rem; }

/* Generic responsive grid used for cards (quotes, photos, and product slots). */
.gm-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.9rem; }

/* Card shell for a text-only customer quote. */
.gm-quote-card { border-radius:.9rem; border:1px solid var(--border); padding:.85rem .9rem; background:var(--surface-elevated); }

/* Main quote text inside a quote card. */
.gm-quote-text { font-size:.9rem; margin-bottom:.25rem; }

/* Meta line under a quote, such as a role or context. */
.gm-quote-meta { font-size:.8rem; color:var(--muted); }

/* Card shell for image-like content across product and photo galleries. */
.gm-photo-card { border-radius:.9rem; border:1px solid var(--border); padding:.85rem .9rem .9rem; background:var(--surface-elevated); display:flex; flex-direction:column; gap:.55rem; }

/* Placeholder media block used to represent an image or video frame. */
.gm-photo-media { width:100%; aspect-ratio:4/3; border-radius:.6rem; background-image:repeating-linear-gradient(135deg, color-mix(in srgb,var(--accent, var(--border)) 35%, transparent) 0, color-mix(in srgb,var(--accent, var(--border)) 35%, transparent) 4px, transparent 4px, transparent 8px); background-color:color-mix(in srgb,var(--surface) 94%, transparent); border:1px dashed var(--border-strong); }

/* Caption text under each media placeholder block. */
.gm-photo-caption { font-size:.85rem; color:var(--fg); }

/* Logo badge container under the “M.U.T.T. moments in the wild” gallery. */
.gm-photos-logo { margin-top:1rem; display:flex; justify-content:flex-end; }

/* Text logo image positioned at the right under the moments section. */
.gm-photos-logo-img { display:block; max-width:1200px; width:100%; height:auto; }

/* Wrapper for values and mission section. */
.gm-values { margin-top:2rem; }

/* Grid for listing company values in cards. */
.gm-values-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }

/* Card shell for individual value statements. */
.gm-value-card { border-radius:.9rem; border:1px solid var(--border); padding:.9rem .95rem; background:var(--surface-elevated); }

/* Value card title styling. */
.gm-value-title { font-size:.96rem; font-weight:600; margin-bottom:.3rem; }

/* Value card description text styling. */
.gm-value-body { font-size:.9rem; color:var(--fg); }

/* Wrapper for purchase call-to-action section. */
.gm-purchase { margin-top:2rem; }

/* Two-column layout for purchase copy and PayPal graphic. */
.gm-purchase-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:1rem; align-items:flex-start; }

/* Column of purchase explanatory text. */
.gm-purchase-copy { display:flex; flex-direction:column; gap:.4rem; }

/* Paragraph styling inside purchase copy. */
.gm-purchase-text { font-size:.9rem; }

/* Container for PayPal graphic and note. */
.gm-purchase-action { display:flex; flex-direction:column; gap:.35rem; align-items:flex-start; }

/* Wrapper for PayPal graphic button used as static placeholder. */
.gm-paypal-button { padding:0; margin:0; border:0; background:none; cursor:default; display:inline-block; }

/* PayPal image graphic, sized to a compact width. */
.gm-paypal-img { display:block; max-width:180px; width:100%; height:auto; }

/* Small note under PayPal graphic explaining placeholder state. */
.gm-purchase-note { font-size:.8rem; color:var(--muted); }

/* Footer wrapper that separates main content from site metadata. */
.gm-footer { margin-top:3rem; border-top:1px solid var(--border); padding-top:1.5rem; }

/* Grid layout for contact, feedback, and legal columns. */
.gm-footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.25rem; }

/* Wrapper for each footer column section. */
.gm-footer-section { }

/* Footer section title typography. */
.gm-footer-title { font-size:.95rem; font-weight:600; margin-bottom:.3rem; }

/* Generic footer body text styling. */
.gm-footer-text { font-size:.85rem; color:var(--muted); }

/* Button in footer to open the website feedback modal. */
.gm-footer-feedback-button { margin-top:.5rem; padding:.35rem .8rem; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface-elevated); font-size:.85rem; cursor:pointer; }

/* Modal root container for website-only feedback dialog positioned above the page. */
.gm-feedback-modal { position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; }

/* Hidden state for feedback modal so it stays closed until JS opens it. */
.gm-feedback-modal[hidden] { display:none !important; }

/* Backdrop behind the feedback dialog to dim the page with a solid overlay. */
.gm-feedback-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.7); }

/* Centered feedback dialog card with solid background above the backdrop. */
.gm-feedback-dialog { position:relative; max-width:480px; width:100%; margin:1.5rem; border-radius:1rem; border:1px solid var(--border-strong); background:var(--surface-elevated); padding:1.25rem 1.3rem 1.1rem; box-shadow:0 18px 45px rgba(0,0,0,.35); }

/* Header area inside feedback dialog containing title and intro. */
.gm-feedback-header { margin-bottom:1rem; }

/* Feedback dialog title text styling. */
.gm-feedback-title { font-size:1.05rem; font-weight:600; margin-bottom:.3rem; }

/* Short explanation that feedback is for website issues only. */
.gm-feedback-intro { font-size:.85rem; color:var(--muted); }

/* Feedback form wrapper providing vertical spacing between fields. */
.gm-feedback-form { display:flex; flex-direction:column; gap:.75rem; }

/* Wrapper for each form control row. */
.gm-feedback-field { display:flex; flex-direction:column; gap:.25rem; }

/* Label text for feedback inputs and selects. */
.gm-feedback-label { font-size:.85rem; }

/* Base styling for all feedback inputs, selects, and textareas. */
.gm-feedback-input { font-size:.9rem; padding:.4rem .5rem; border-radius:.4rem; border:1px solid var(--border-strong); background:var(--surface); }

/* Multiline feedback text area variant. */
.gm-feedback-input-multiline { resize:vertical; min-height:6rem; }

/* Extra note warning not to include sensitive or order-specific info. */
.gm-feedback-note { font-size:.8rem; color:var(--muted); }

/* Horizontal button row at the bottom of the dialog. */
.gm-feedback-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:.3rem; }

/* Base button styling used for both primary and secondary actions. */
.gm-feedback-button { font-size:.85rem; padding:.35rem .9rem; border-radius:.5rem; border:1px solid var(--border-strong); cursor:pointer; }

/* Primary submit button style for sending feedback. */
.gm-feedback-button-primary { background:var(--accent, var(--surface-elevated)); }

/* Secondary button style used for closing or cancelling the dialog. */
.gm-feedback-button-secondary { background:var(--surface); }

/* Nav drawer and main content slide together so there is no dead space when closed. */
body .gm-page-root .gm-shell { transform:none; }

/* Closed state: drawer and main are both shifted left by the drawer width. */
body .gm-page-root .gm-nav-drawer { transform:translateX(-260px); transition:transform .25s ease; }
body .gm-page-root .gm-main { transform:translateX(-260px); transition:transform .25s ease; }

/* Open state: drawer visible at left, main pushed right by the drawer width. */
body .gm-page-root.gm-nav-open .gm-nav-drawer { transform:translateX(0); }
body .gm-page-root.gm-nav-open .gm-main { transform:translateX(0); }

/* Stack the left and right columns vertically on medium screens. */
@media (max-width:900px) { .gm-main-grid { grid-template-columns:minmax(0,1fr); } }

/* Stack purchase copy and PayPal graphic on medium screens. */
@media (max-width:900px) { .gm-purchase-layout { grid-template-columns:minmax(0,1fr); } }

/* Collapse to a simple centered column on medium screens. */
@media (max-width:900px) { .gm-main-layout { max-width:100%; } }

/* Tighten header and main padding on narrow screens. */
@media (max-width:640px) { .gm-header-inner { padding:.6rem .75rem; } .gm-main { padding:1.1rem .9rem 2.5rem; } }

/* Keep the hero banner from taking over the entire page height. */
.gm-logo-banner-img { display:block; max-width:100%; height:auto; max-height:260px; margin:0 auto; object-fit:contain; }

/* Tile-sized media container for product image cards. */
.gm-photo-card-product .gm-photo-media { position:relative; height:190px; border-radius:.75rem; overflow:hidden; }

/* Product images fill their tile instead of using original huge dimensions. */
.gm-photo-card-product .gm-photo-img-product { display:block; width:100%; height:100%; object-fit:cover; }

/* Tile-sized media container for product video cards. */
.gm-video-card .gm-photo-media { position:relative; height:190px; border-radius:.75rem; overflow:hidden; }

/* Product videos also fill the tile area like images. */
.gm-video-card .gm-video-player { display:block; width:100%; height:100%; object-fit:cover; }