/* GeoRank stylesheet — generated from the Design tab. Layout CSS is shared
   across every theme; only the :root tokens above change. Add your own
   overrides in the Advanced CSS box on the Design tab, not here directly —
   this whole file is rewritten every time a theme is applied. */

:root{
  --max-w: 1040px;
  --font: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;
  --font-heading: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --heading-transform: none;
  --heading-tracking: normal;
  --text: #1c1f26;
  --muted: #5b6472;
  --bg: #ffffff;
  --surface: #f6f7f9;
  --border: #e6e8ec;
  --accent: #2454ff;
  --accent-dark: #1a3fd1;
  --radius: 12px;
  --header-height: 100px;
  --logo-height: 80px;
  --logo-max-width: 250px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--font);font-size:var(--font-size-base);color:var(--text);background:var(--bg);line-height:var(--line-height-base);}
/* height:auto is load-bearing, not decorative: every inserted <img> carries
   real width/height attributes (see dimAttrsFor()) so the box doesn't jump
   around while the file loads. Pairing max-width:100% with those attributes
   alone is NOT enough to keep the image proportional once it shrinks to fit
   a narrower column — some browsers hold the attribute height as a literal
   pixel value until an explicit height rule tells them otherwise, squashing
   or stretching the image instead of scaling it. height:auto is what makes
   width and height shrink together. Round 41. */
img{max-width:100%;height:auto;display:block;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
.container{max-width:var(--max-w);margin:0 auto;padding:0 20px;}
h1,h2,h3,.logo{font-family:var(--font-heading);text-transform:var(--heading-transform);letter-spacing:var(--heading-tracking);}

/* Header / nav */
.site-header{border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:50;min-height:var(--header-height);}
.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;min-height:var(--header-height);padding:10px 20px;gap:10px;}
.logo{font-weight:700;font-size:18px;color:var(--text);display:flex;align-items:center;height:var(--logo-height);}
.logo img{height:var(--logo-height);max-width:var(--logo-max-width);width:auto;object-fit:contain;display:block;margin-right:10px;}
.nav-toggle{display:inline-block;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;font-size:18px;padding:6px 10px;cursor:pointer;}
/* Styles the 3-bar hamburger icon some header.html edits build the button
   from instead of a text character — a no-op (no matching elements) on a
   header.html that still uses the plain "&#9776;" character button. */
.nav-toggle span{display:block;width:18px;height:2px;margin:4px 0;background:var(--text);border-radius:1px;}
.site-nav{display:none;flex-direction:column;gap:4px;width:100%;padding-top:10px;}
.site-nav.open{display:flex;}
.site-nav a{padding:10px 4px;color:var(--text);border-bottom:1px solid var(--border);}

/* Hero */
.hero{padding:56px 0 40px;}
.hero-inner{display:flex;flex-direction:column;gap:28px;align-items:center;}
.hero h1{font-size:28px;line-height:1.2;margin:0 0 12px;}
.hero p{color:var(--muted);font-size:16px;margin:0 0 20px;max-width:60ch;}
.hero-media img{border-radius:var(--radius);border:1px solid var(--border);}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:12px 20px;border-radius:var(--radius);font-weight:600;font-size:14px;border:0;cursor:pointer;}
.btn:hover{background:var(--accent-dark);text-decoration:none;}

/* Sections & cards */
section{padding:36px 0;}
.section-title{font-size:22px;margin:0 0 20px;}
.grid{display:grid;grid-template-columns:1fr;gap:16px;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;}
.card h3{margin:0 0 8px;font-size:16px;}
.card p{margin:0;color:var(--muted);font-size:14px;}

/* Footer */
.site-footer{border-top:1px solid var(--border);background:var(--surface);margin-top:40px;padding:28px 0;}
.site-footer p{color:var(--muted);font-size:13px;margin:4px 0;}

/* Business Info (auto-synced name/address/contact — footer.html + Contact page) */
.georank-biz-info{max-width:var(--max-w);margin:16px auto;padding:0 20px;font-size:13px;color:var(--muted);}
.georank-biz-info .biz-name{font-weight:700;color:var(--text);margin:0 0 4px;}
.georank-biz-info .biz-address,.georank-biz-info .biz-contact{margin:2px 0;}
.georank-biz-info .biz-contact a{color:inherit;text-decoration:underline;}

/* ---- Rich media: galleries, lightbox, slideshow, image + text overlay ---- */
.georank-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.georank-gallery a{border-radius:var(--radius);overflow:hidden;display:block;}
.georank-gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;transition:transform .2s ease;}
.georank-gallery a:hover img{transform:scale(1.04);}

/* display stays flex at all times; opacity+visibility drive the actual
   show/hide so the pop-in/pop-out has something to transition. The
   visibility transition is delayed on the way in (0s) and deferred on the
   way out (.25s, matching the opacity duration) so the overlay stops
   intercepting clicks/taps only after it has fully faded, not before. */
.georank-lightbox-overlay{position:fixed;inset:0;background:rgba(10,10,14,.92);display:flex;align-items:center;justify-content:center;z-index:9999;padding:24px;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s;}
.georank-lightbox-overlay.open{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s linear 0s;}
.georank-lightbox-overlay .glb-frame{max-width:100%;transform:scale(.92);transition:transform .25s cubic-bezier(.22,.9,.32,1.2);}
.georank-lightbox-overlay.open .glb-frame{transform:scale(1);}
.georank-lightbox-overlay img{max-width:100%;max-height:88vh;width:auto;height:auto;border-radius:8px;margin:0 auto;display:block;}
.georank-lightbox-overlay .glb-caption{color:#fff;text-align:center;font-size:14px;margin-top:10px;opacity:.85;}
.georank-lightbox-overlay .glb-close,.georank-lightbox-overlay .glb-prev,.georank-lightbox-overlay .glb-next{position:fixed;background:var(--accent);color:#fff;border:0;width:44px;height:44px;border-radius:50%;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.9;}
.georank-lightbox-overlay .glb-close{top:18px;right:18px;}
.georank-lightbox-overlay .glb-prev{left:18px;top:50%;transform:translateY(-50%);}
.georank-lightbox-overlay .glb-next{right:18px;top:50%;transform:translateY(-50%);}
.georank-lightbox-overlay .glb-close:hover,.georank-lightbox-overlay .glb-prev:hover,.georank-lightbox-overlay .glb-next:hover{background:var(--accent-dark);opacity:1;}
/* Auto-applied by georank-media.js to any standalone content image (not a
   gallery thumb, slideshow slide, hero photo or logo) so visitors get a
   tap-to-enlarge affordance without the editor wrapping it in a block. */
.georank-lightbox-zoomable{cursor:zoom-in;transition:opacity .15s ease;}
.georank-lightbox-zoomable:hover{opacity:.92;}

.georank-slideshow{position:relative;border-radius:var(--radius);overflow:hidden;}
.georank-slideshow .gss-track{position:relative;width:100%;aspect-ratio:16/9;}
.georank-slideshow .gss-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;}
.georank-slideshow .gss-slide.active{opacity:1;}
.georank-slideshow .gss-slide img{width:100%;height:100%;object-fit:cover;}
.georank-slideshow .gss-arrow{position:absolute;top:50%;transform:translateY(-50%);background:var(--accent);color:#fff;border:0;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:18px;opacity:.9;}
.georank-slideshow .gss-arrow:hover{background:var(--accent-dark);opacity:1;}
.georank-slideshow .gss-prev{left:12px;}
.georank-slideshow .gss-next{right:12px;}
.georank-slideshow .gss-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:8px;}
.georank-slideshow .gss-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.55);border:0;cursor:pointer;padding:0;}
.georank-slideshow .gss-dot.active{background:#fff;}

/* Image caption — the Media Library's "insert with caption" option wraps the
   image in <figure class="image"><figcaption>, TinyMCE's own default markup
   for a captioned image. Centered by default, matching the image above it. */
figure.image{margin:0 0 20px;text-align:center;}
figure.image img{max-width:100%;height:auto;display:block;margin:0 auto;}
figure.image figcaption{margin-top:8px;font-size:13px;color:var(--muted);text-align:center;}

.georank-overlay{position:relative;border-radius:var(--radius);overflow:hidden;cursor:zoom-in;}
.georank-overlay img{width:100%;height:auto;display:block;}
/* Heading, description and button are centered by default — both as a block
   (text-align:center) and as flex items (align-items:center), so the button
   sits centered under the text instead of pinned to the left edge. */
.georank-overlay-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:24px;text-align:center;background:linear-gradient(to top, rgba(0,0,0,.68), rgba(0,0,0,0) 65%);color:#fff;}
.georank-overlay-text h3{margin:0 0 6px;font-size:22px;font-weight:700;color:#fff;}
.georank-overlay-text p{margin:0 0 14px;font-size:14px;opacity:.92;}
.georank-overlay-text .btn{align-self:center;}

/* Quick-insert content blocks (Files tab sidebar) — imgtext is intentionally
   a fixed row on every screen size, per site-owner preference; the other two
   are mobile-first (stacked on mobile, multi-column from 720px up).
   The media column is a fluid 50/50 split with the text (flex-basis 50%, so
   it scales down smoothly on narrow screens instead of jumping straight to a
   fixed size) capped at max-width 250px mobile / 500px desktop via the media
   query below, so it never overflows or dominates the row on a wide screen
   but still shrinks proportionally on a narrow one (e.g. a 400px-wide screen
   naturally lands around 200px, well under the 250px cap). A small min-width
   keeps it from shrinking to an unreadable sliver on very narrow phones.
   This is a default, not per-site CSS.

   Centering fix (Round 35): this block, and every other multi-column
   quick-insert block below it (capsules, flexgrid, faq, testimonials,
   pricing), lands directly inside the page's MARK_CONTENT_START/END region
   when the admin inserts it — that region is NOT itself wrapped in
   `.container`, only the placeholder hero content the page starts with is.
   Before this round these blocks had no max-width/margin, so on any desktop
   viewport they rendered true edge-to-edge, uncontained and off-center next
   to the properly-contained hero above/below them. Fixed by giving each one
   the same max-width:var(--max-w);margin:Npx auto;padding:0 20px pattern
   `.container` and `.georank-biz-info` already use, so they self-center at
   the site's own content width regardless of what (if anything) wraps them.
   YouTube (`.georank-yt-embed`) and Single Column Panel (`.georank-panel`)
   already did this correctly and needed no change. */
/* Round 42: wrapped in a soft-shadow card (background + radius + a light
   elevation shadow) so this block reads as one distinct unit against
   surrounding page content, instead of the image and text floating loose in
   the page flow. background/radius use the active theme's own --surface and
   --radius tokens (same ones .card/.flexbox/.capsule already use) so it
   adapts correctly across all 8 presets, including Dark Mode, with no new
   color to maintain. The shadow itself is a fixed, theme-independent value —
   nothing else in this codebase varies shadow by theme, and a small dark
   shadow reads fine against every preset's background. */
.georank-imgtext{display:flex;flex-direction:row;align-items:center;gap:20px;max-width:var(--max-w);margin:20px auto;padding:20px;background:var(--surface);border-radius:var(--radius);box-shadow:0 1px 3px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.06);}
.georank-imgtext .git-media{flex:1 1 50%;max-width:250px;min-width:96px;}
.georank-imgtext .git-media img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:var(--radius);}
.georank-imgtext .git-text{flex:1 1 50%;min-width:0;}
.georank-imgtext .git-text h3{margin:0 0 8px;}
.georank-imgtext .git-text p{margin:0;}

.georank-capsules{display:flex;flex-direction:column;gap:14px;max-width:var(--max-w);margin:20px auto;padding:0 20px;}
.georank-capsules .capsule{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:16px 26px;text-align:center;}
.georank-capsules .capsule h4{margin:0 0 6px;}
.georank-capsules .capsule p{margin:0;font-size:14px;}

.georank-flexgrid{display:grid;grid-template-columns:1fr;gap:16px;max-width:var(--max-w);margin:20px auto;padding:0 20px;}
.georank-flexgrid .flexbox{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
.georank-flexgrid .flexbox h4{margin:0 0 8px;}
.georank-flexgrid .flexbox p{margin:0;font-size:14px;}

/* FAQ accordion — built on native <details>/<summary>. Rounds 21/22 tried a
   JS-driven <button>/<div> rebuild, then reverted (Round 23) back to plain
   <details>/<summary> after the user reported it working, assumed to have
   been a stale-cache false alarm. It resurfaced again (Round 28) — this
   time fixed by loading TinyMCE's own free/open-source Accordion plugin
   (see tinymce.init()'s plugins/toolbar) and marking every FAQ <details>
   with class="mce-accordion" so the plugin's own vendor-maintained code
   owns the expand/collapse interaction inside the editor, instead of
   depending on the browser's native <summary> click-activation working
   correctly inside a contenteditable region (the thing that was never
   reliable across Rounds 21-23). The class is inert on the live site —
   nothing here targets .mce-accordion — so styling is unchanged. */
.georank-faq{max-width:var(--max-w);margin:20px auto;padding:0 20px;}
.georank-faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;overflow:hidden;}
.georank-faq summary{list-style:none;cursor:pointer;padding:16px 44px 16px 18px;font-weight:600;position:relative;}
.georank-faq summary::-webkit-details-marker{display:none;}
.georank-faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:20px;font-weight:400;color:var(--accent);transition:transform .15s ease;}
.georank-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.georank-faq details p{margin:0;padding:0 18px 16px;color:var(--muted);font-size:14px;}

/* Testimonial / review cards */
.georank-testimonials{display:flex;flex-direction:column;gap:16px;max-width:var(--max-w);margin:20px auto;padding:0 20px;}
.georank-testimonials .testimonial{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;}
.georank-testimonials .testimonial .t-stars{color:var(--accent);font-size:14px;margin:0 0 8px;letter-spacing:2px;}
.georank-testimonials .testimonial .t-quote{margin:0 0 12px;font-style:italic;color:var(--text);}
.georank-testimonials .testimonial .t-quote::before{content:"\201C";}
.georank-testimonials .testimonial .t-quote::after{content:"\201D";}
.georank-testimonials .testimonial .t-name{margin:0;font-weight:700;font-size:14px;}

/* Pricing / plan cards */
.georank-pricing{display:flex;flex-direction:column;gap:16px;max-width:var(--max-w);margin:20px auto;padding:0 20px;}
.georank-pricing .plan{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;text-align:center;}
.georank-pricing .plan.featured{border-color:var(--accent);border-width:2px;}
.georank-pricing .plan h4{margin:0 0 4px;font-size:16px;}
.georank-pricing .plan .plan-price{font-size:28px;font-weight:700;margin:8px 0;color:var(--text);}
.georank-pricing .plan .plan-price span{font-size:13px;font-weight:400;color:var(--muted);}
.georank-pricing .plan ul{list-style:none;margin:14px 0;padding:0;text-align:left;}
.georank-pricing .plan ul li{padding:6px 0 6px 22px;position:relative;font-size:14px;color:var(--muted);border-top:1px solid var(--border);}
.georank-pricing .plan ul li:first-child{border-top:0;}
.georank-pricing .plan ul li::before{content:"\2713";position:absolute;left:0;color:var(--accent);font-weight:700;}
.georank-pricing .plan .btn{margin-top:6px;}

/* YouTube embed — paste-a-URL block (admin: Quick-insert panel). Capped at
   600px and centered per the site's layout convention; the inner .yt-frame
   uses the standard responsive-iframe wrapper (padding-top:56.25% = 16:9)
   so the video scales proportionally on any screen instead of overflowing
   on phones, while the iframe's own width/height="560"/"315" attributes
   stay as the nominal default size (overridden by the CSS below, but kept
   as a sane fallback wherever the stylesheet doesn't apply). */
.georank-yt-embed{max-width:600px;margin:24px auto;}
.georank-yt-embed .yt-frame{position:relative;width:100%;padding-top:56.25%;height:0;overflow:hidden;border-radius:var(--radius);background:#000;}
.georank-yt-embed .yt-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}

/* Single Column Panel (Files tab quick-insert, below YouTube). Background,
   heading/text color, border color, border width, corner radius and padding
   are all set per-instance by the admin — via one of 3 paired design-palette
   options chosen in the insert modal — and stored as inline style="" on this
   element. color/background/border-color are a matched set so the panel is
   never fighting the active site theme's own --text token for contrast: this
   is the fix for the old bug where only background was admin-set and the
   heading/body text silently inherited the theme's --text color, which could
   be near-invisible against an admin-chosen background (e.g. Dark Mode's
   light --text on this block's own default white background). border-color
   in the class rule below is only a fallback for a panel inserted before
   palettes existed (no inline border-color yet) — every new insert always
   carries one. Border *style*, spacing and heading-margin reset stay a
   normal class rule since they're identical across every panel regardless
   of palette. Default margin/padding are both 10px — margin keeps "auto"
   left/right so the panel stays centered (see the site-build lesson in the
   enhancement notes: replacing the whole margin shorthand with a value that
   has no "auto" component un-centers this block, since it isn't wrapped in
   .container). */
.georank-panel{display:block;box-sizing:border-box;border-style:solid;border-color:var(--border);margin:10px auto;max-width:720px;}
.georank-panel > *:first-child{margin-top:0;}
.georank-panel > *:last-child{margin-bottom:0;}

/* Back-to-top button (assets/js/georank-media.js adds/removes .visible on
   scroll; toggled sitewide via Setup → Rich Media). */
.georank-backtotop{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;border:0;font-size:20px;line-height:1;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s,bottom .2s ease;box-shadow:0 4px 14px rgba(0,0,0,.18);z-index:400;}
.georank-backtotop.visible{opacity:.92;visibility:visible;transform:translateY(0);}
.georank-backtotop:hover{opacity:1;background:var(--accent-dark);}
/* Pushed up when the sticky WhatsApp button (below) is also enabled, so the
   two never overlap — back-to-top stacks directly above it with a clear gap,
   instead of both sitting at the same bottom-right corner. Class is added by
   initWhatsAppFab() in georank_template_media_js(), never by CSS alone,
   since it depends on whether WhatsApp is actually enabled for this site. */
.georank-backtotop.stacked{bottom:82px;}

/* Sticky WhatsApp button (assets/js/georank-media.js adds it at runtime;
   toggled sitewide via Setup -> Rich Media, alongside back-to-top). Always
   visible once enabled rather than gated behind a scroll threshold like
   back-to-top — it's meant to be a persistent contact affordance, not a
   convenience that only shows up once you've scrolled. Fixed brand green
   background (WhatsApp's own official color) rather than a theme token,
   same reasoning as the back-to-top button being unmistakably itself
   regardless of which of the 8 presets is active. */
.georank-whatsapp{position:fixed;right:18px;bottom:18px;width:52px;height:52px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.22);z-index:410;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;}
.georank-whatsapp:hover{transform:scale(1.06);box-shadow:0 6px 18px rgba(0,0,0,.28);}
.georank-whatsapp svg{width:28px;height:28px;}

/* Tablet and up */
@media (min-width: 720px){
  .nav-toggle{display:none;}
  .header-inner{flex-wrap:nowrap;}
  .site-nav{display:flex !important;flex-direction:row;width:auto;padding-top:0;gap:22px;}
  .site-nav a{border-bottom:none;padding:0;}
  .hero h1{font-size:38px;}
  .hero-inner{flex-direction:row;justify-content:space-between;}
  .hero-media{flex-shrink:0;}
  .grid{grid-template-columns:repeat(3,1fr);}
  .georank-gallery{grid-template-columns:repeat(3,1fr);}
  .georank-imgtext .git-media{max-width:500px;}
  /* Round 36: was flex-direction:row + flex:1 on every capsule, forcing the
     whole block into exactly one row no matter how many capsules it held —
     fine at the 2-3 card default, but a 5- or 6-card block (a real site's
     "Why Choose Us" / "Built for Different Project Sizes" section, found
     during the Shri Tiles build) squeezed every capsule down to an
     illegibly narrow sliver instead of wrapping. flex-wrap lets it wrap into
     rows of ~3 (260px basis capped at 320px means 3 comfortably fit inside
     the site's own content width before a 4th wraps); justify-content:center
     keeps a partial last row (1 or 2 leftover capsules) centered instead of
     stretching to fill the row or sitting flush left. A 2-3 card block still
     renders as a single centered row exactly as before — this only changes
     behavior once there are enough capsules to no longer fit comfortably. */
  .georank-capsules{flex-direction:row;flex-wrap:wrap;justify-content:center;}
  .georank-capsules .capsule{flex:1 1 260px;max-width:320px;}
  .georank-flexgrid{grid-template-columns:repeat(var(--cols,3),1fr);}
  .georank-testimonials{flex-direction:row;}
  .georank-testimonials .testimonial{flex:1;}
  .georank-pricing{flex-direction:row;align-items:flex-start;}
  .georank-pricing .plan{flex:1;}
  .georank-pricing .plan.featured{transform:translateY(-8px);}
}

/* GEORANK:THEME-CUSTOM-CSS:START */
/* === Navy header to match the Unnati GeoRank logo === */
:root{
  --header-navy: #0e3c3b;
  --header-navy-light: #0B1C4F;   /* subtle hover/border shade, one step lighter */
  --logo-cyan: #38BDF8;           /* from the logo's bar-chart gradient */
  --logo-purple: #7C3AED;         /* from the logo's bar-chart gradient */
}

.site-header{
  background: var(--header-navy);
  border-bottom-color: var(--header-navy-light);
}

.site-header .site-nav a{
  color: #fff;
}

.site-header .site-nav a:hover{
  color: var(--logo-cyan);
}

.site-header .nav-toggle{
  color: #fff;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
}
/* GEORANK:THEME-CUSTOM-CSS:END */