/* ============================================================
   custom.css — gateway-web-design.com theme, layered over the
   built bundle. Loaded AFTER the compiled CSS so it wins.
   Targets elements by their stable `code-path` attribute + by
   the Tailwind utility classes the bundle already uses.

   Gateway design language:
     fonts   Poppins everywhere (user request 2026-06-10)
     palette navy #0F2747 + gold #A8946A on warm canvas #f4f4f6
     cards   frosted-white glass, soft navy shadows, hover lift
     intros  centered eyebrow (uppercase, navy) + heading
   Edit freely.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  --navy: #0F2747;
  --navy-deep: #0a1c33;
  --navy-hover: #1a3a5f;
  --gold: #A8946A;
  --gold-soft: rgba(168, 148, 106, 0.18);
  --canvas: #f4f4f6;
  --paper: #ffffff;
  --ink: #14202e;
  --gray: #5b6675;
  --line: #E7E7E3;
  --pf-sans: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --pf-serif: 'Poppins', system-ui, sans-serif;
}

/* ---------- Typography ----------------------------------- */
html, body, button, input, textarea, select {
  font-family: var(--pf-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h2, h3, h4, h5, h6 { font-family: var(--pf-sans) !important; letter-spacing: -0.01em; }
h1 { font-family: var(--pf-serif) !important; letter-spacing: -0.01em; }
/* main section headings get the editorial serif for a premium feel */
section h2 { font-family: var(--pf-serif) !important; font-weight: 600 !important; letter-spacing: -0.005em; }

/* ---------- Palette recolor (accent utility classes) ----- */
/* blue accents -> navy */
.text-blue-600, .text-blue-700, .text-blue-500, .text-blue-400 { color: var(--navy) !important; }
.bg-blue-600, .bg-blue-700 { background-color: var(--navy) !important; }
.hover\:bg-blue-700:hover, .hover\:bg-blue-600:hover { background-color: var(--navy-hover) !important; }
.border-blue-200 { border-color: rgba(15, 39, 71, 0.18) !important; }
.bg-blue-50 { background-color: rgba(15, 39, 71, 0.06) !important; }

/* emerald/green accents: solid fills -> navy (primary CTAs),
   text/icons -> gold */
.text-emerald-400, .text-emerald-500, .text-emerald-600, .text-emerald-300, .text-green-600, .text-green-500 { color: var(--gold) !important; }
.bg-emerald-500, .bg-emerald-600, .bg-green-600, .bg-green-500 { background-color: var(--navy) !important; }
.hover\:bg-emerald-600:hover, .hover\:bg-emerald-700:hover, .hover\:bg-green-700:hover { background-color: var(--navy-hover) !important; }
.border-emerald-500, .border-emerald-500\/30 { border-color: var(--gold) !important; }
.bg-emerald-500\/20 { background-color: var(--gold-soft) !important; }
.text-emerald-700 { color: var(--navy) !important; }
/* light green tints (nav active pill, etc.) -> soft navy */
.bg-emerald-50, .bg-green-50 { background-color: rgba(15, 39, 71, 0.07) !important; }
.hover\:text-emerald-400:hover, .hover\:text-emerald-300:hover { color: var(--gold) !important; }
.hover\:border-emerald-500:hover { border-color: var(--gold) !important; }
/* RECOMMENDED badge stays a gold accent */
[code-path="src/pages/Home.tsx:131:11"] { background-color: var(--gold) !important; }

/* ghost/outline button on the dark navy footer -> readable white outline */
.border-2.border-slate-600.text-slate-300 {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
}
.border-2.border-slate-600.text-slate-300:hover {
  border-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* the colored ACCENT WORD inside a heading -> warm gold pop */
:is(h1, h2, h3) :is(.text-blue-600, .text-emerald-400, .text-emerald-500) {
  color: var(--gold) !important;
}

/* section background tones -> gateway canvas / paper */
.bg-slate-50 { background-color: var(--canvas) !important; }
.bg-slate-900 { background-color: var(--navy) !important; }

/* ---------- Eyebrows (uppercase, letter-spaced, navy) ---- */
.text-sm.text-blue-600.font-semibold,
.text-sm.text-emerald-600.font-semibold {
  text-transform: uppercase !important;
  letter-spacing: 0.22em !important;
  font-weight: 500 !important;
  font-size: 0.72rem !important;
  color: var(--navy) !important;
}
/* thin eyebrow rule lines -> gold */
.bg-blue-600.inline-block, span[class*="h-[2px]"].bg-blue-600 { background-color: var(--gold) !important; }

/* ---------- Soft navy shadows everywhere ----------------- */
.shadow-lg, .shadow-xl, .shadow-2xl, .shadow-md {
  box-shadow: 0 12px 34px rgba(15, 39, 71, 0.08) !important;
}
.hover\:shadow-lg:hover, .hover\:shadow-xl:hover, .hover\:shadow-2xl:hover {
  box-shadow: 0 26px 56px rgba(15, 39, 71, 0.13) !important;
}

/* ---------- Cards -> gateway frosted glass --------------- */
.bg-white.rounded-2xl,
.bg-white.rounded-xl.border,
.bg-white.border.border-slate-200.rounded-2xl {
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(15, 39, 71, 0.07) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 12px 34px rgba(15, 39, 71, 0.08) !important;
  transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s cubic-bezier(.22,.61,.36,1), border-color .5s;
}
.bg-white.rounded-2xl:hover { transform: translateY(-6px); }

/* ===========================================================
   ABOUT section (447:7) — now LIGHT + centered intro
   =========================================================== */
section[code-path="src/pages/Home.tsx:447:7"] {
  background: var(--paper) !important;
}
/* collapse the 2-col grid into a single centered column */
section[code-path="src/pages/Home.tsx:447:7"] [code-path="src/pages/Home.tsx:449:11"] {
  display: block !important;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
section[code-path="src/pages/Home.tsx:447:7"] [code-path="src/pages/Home.tsx:535:13"] {
  text-align: center;
  max-width: 720px;
  margin: 2.5rem auto 0;
}
/* recolor the (was-white-on-black) text for a light background */
section[code-path="src/pages/Home.tsx:447:7"] [code-path="src/pages/Home.tsx:540:15"] { color: var(--ink) !important; }
section[code-path="src/pages/Home.tsx:447:7"] [code-path="src/pages/Home.tsx:536:15"] {
  color: var(--navy) !important;
  text-transform: uppercase; letter-spacing: 0.22em; font-weight: 500; justify-content: center;
}
section[code-path="src/pages/Home.tsx:447:7"] p { color: var(--gray) !important; }
/* center the headshot/visual block */
section[code-path="src/pages/Home.tsx:447:7"] [code-path="src/pages/Home.tsx:449:11"] > *:last-child {
  margin-left: auto; margin-right: auto;
}
/* REMOVE the stat cards (Five / 800+ / 90%+) */
[code-path="src/pages/Home.tsx:548:15"] { display: none !important; }

/* ===========================================================
   SERVICES section (364:7) — center its left-aligned intro
   =========================================================== */
section[code-path="src/pages/Home.tsx:364:7"] [code-path="src/pages/Home.tsx:373:13"] {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
}
section[code-path="src/pages/Home.tsx:364:7"] [code-path="src/pages/Home.tsx:375:17"] { justify-content: center; }

/* ===========================================================
   PRICING section (565:7)
   =========================================================== */
/* hide the price text ("Reach out / to get pricing") — blank */
[code-path="src/pages/Home.tsx:138:9"],
[code-path="src/pages/Home.tsx:177:7"] { display: none !important; }
/* featured card -> solid navy */
[code-path="src/pages/Home.tsx:129:7"] {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
}
/* "show more features" toggle -> navy */
[code-path="src/pages/Home.tsx:155:11"] { color: var(--navy) !important; }

/* WhatsApp CTA button (text/href/icon injected by enhance.js) */
.pf-wa-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  margin-top: auto;
  padding: 0.9rem 1rem;
  border-radius: 9999px;
  background: var(--navy) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 26px rgba(15, 39, 71, 0.22);
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
  cursor: pointer;
}
.pf-wa-btn:hover {
  background: #1FA855 !important;   /* WhatsApp green on hover (gateway pattern) */
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(31, 168, 85, 0.30);
}
.pf-wa-btn svg { width: 1.15rem; height: 1.15rem; flex: none; }

/* ---------- Soft / smooth scrolling (Lenis) -------------- */
html:not(.lenis) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ===========================================================
   Round 3 tweaks
   =========================================================== */

/* Hero — headshot photo border: green -> black */
[code-path="src/pages/Home.tsx:278:17"] { border-color: #000 !important; }

/* AI-Powered Workflows (669:7) — center the card photos */
section[code-path="src/pages/Home.tsx:669:7"] img { object-position: center center !important; display: block; margin-inline: auto; }
section[code-path="src/pages/Home.tsx:669:7"] [code-path="src/pages/Home.tsx:717:19"] {
  display: flex; align-items: center; justify-content: center;
}

/* Services (Key Competencies) — breathing room after the
   "View All Services" button, before the cards */
section[code-path="src/pages/Home.tsx:364:7"] [code-path="src/pages/Home.tsx:373:13"] {
  margin-bottom: 4.5rem !important;
  row-gap: 1.4rem;
}

/* About — lock headshot centering + make accents BLACK (not green/gold) */
section[code-path="src/pages/Home.tsx:447:7"] [code-path="src/pages/Home.tsx:457:13"] {
  display: flex !important;
  justify-content: center !important;
}
/* eyebrow text -> black, rule line(s) -> black */
section[code-path="src/pages/Home.tsx:447:7"] [code-path="src/pages/Home.tsx:536:15"] { color: #111 !important; }
section[code-path="src/pages/Home.tsx:447:7"] [code-path="src/pages/Home.tsx:536:15"] span { background-color: #111 !important; }
/* accent word "Operations" -> black */
section[code-path="src/pages/Home.tsx:447:7"] :is(h1, h2, h3) :is(.text-emerald-400, .text-emerald-300, .text-blue-600) { color: #111 !important; }

/* ===========================================================
   Round 4 tweaks
   =========================================================== */

/* About — tighten the section so it's balanced (kill the empty void
   left by the removed stat cards) + snug headshot-to-text gap */
section[code-path="src/pages/Home.tsx:447:7"] {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}
section[code-path="src/pages/Home.tsx:447:7"] [code-path="src/pages/Home.tsx:535:13"] {
  margin-top: 1.25rem !important;
}
/* the About body paragraph has max-w-[512px] but no mx-auto, so it sat
   left of the centered heading. Center it. */
section[code-path="src/pages/Home.tsx:447:7"] [code-path="src/pages/Home.tsx:543:15"] {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hero — bring the "AI-Powered" tag down, closer to the photo */
[code-path="src/pages/Home.tsx:287:17"] { top: 44px !important; }

/* AI-Powered Workflows — show photos "wide angle" (less crop) + centered.
   Taller 16:10 frame instead of the tight h-44 band. */
section[code-path="src/pages/Home.tsx:669:7"] [code-path="src/pages/Home.tsx:717:19"] {
  display: block !important;
  height: auto !important;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
/* scope to the PHOTO wrappers only — must not touch the Claude/ChatGPT/
   Gemini logo images (which keep their own h-10 object-contain styling) */
section[code-path="src/pages/Home.tsx:669:7"] [code-path="src/pages/Home.tsx:717:19"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
}
/* keep the tool logos uniform + fully visible (uncropped, centered) */
section[code-path="src/pages/Home.tsx:669:7"] [code-path="src/pages/Home.tsx:740:19"] {
  height: 2.75rem !important;
  width: auto !important;
  max-width: 80% !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto 0.75rem !important;
}

/* ===========================================================
   Round 5 — "Web Design business" section (injected by enhance.js,
   placed after Certifications). Promotes gateway-web-design.com.
   =========================================================== */
.pf-webdesign { background: var(--paper); padding: clamp(56px, 8vw, 104px) 0; }
.pf-wd-inner {
  max-width: 1140px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px);
  display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(30px, 4.5vw, 64px); align-items: center;
}
@media (max-width: 900px) { .pf-wd-inner { grid-template-columns: 1fr; } }
.pf-wd-text .pf-eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 18px;
  text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.72rem; font-weight: 500; color: var(--navy);
}
.pf-wd-text .pf-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold); }
.pf-wd-text h2 {
  font-family: 'Poppins', system-ui, sans-serif !important; font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 2.85rem); line-height: 1.12; color: var(--ink); margin: 0 0 16px;
}
.pf-wd-text h2 span { color: var(--gold); }
.pf-wd-text > p { color: var(--gray); font-size: 1.05rem; line-height: 1.7; margin: 0 0 22px; max-width: 46ch; }
.pf-wd-feats { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 11px; }
.pf-wd-feats li { display: flex; align-items: flex-start; gap: 11px; color: #25313f; font-size: 0.98rem; }
.pf-wd-feats svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--gold); }
.pf-wd-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.pf-wd-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 9999px;
  background: var(--navy); color: #fff; font-weight: 600; font-size: 0.95rem;
  box-shadow: 0 12px 30px rgba(15, 39, 71, 0.22); transition: transform .3s, background .3s, box-shadow .3s;
}
.pf-wd-btn:hover { background: var(--navy-hover); transform: translateY(-2px); }
.pf-wd-link { font-weight: 600; color: var(--navy); font-size: 0.95rem; display: inline-flex; align-items: center; gap: 6px; }
.pf-wd-link:hover { color: var(--gold); }

/* browser-frame mockup around the screenshot */
.pf-webframe {
  display: block; border-radius: 16px; overflow: hidden; background: #fff;
  border: 1px solid rgba(15, 39, 71, 0.10);
  box-shadow: 0 26px 64px rgba(15, 39, 71, 0.18); transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s;
}
.pf-webframe:hover { transform: translateY(-6px); box-shadow: 0 36px 80px rgba(15, 39, 71, 0.22); }
.pf-webframe .bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #eceef1; border-bottom: 1px solid rgba(15,39,71,0.06); }
.pf-webframe .bar i { width: 11px; height: 11px; border-radius: 50%; background: #cfd4da; }
.pf-webframe .bar .url { flex: 1; margin-left: 8px; background: #fff; border-radius: 9999px; padding: 5px 14px; font-size: 0.78rem; color: var(--gray); font-family: 'Poppins', sans-serif; }
.pf-webframe img { width: 100%; display: block; }

/* ============================================================
   GLOBAL FONT: Poppins everywhere (2026-06-10). Beats the
   bundle's Inter stack and any leftover serif styling.
   ============================================================ */
html, body {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif !important;
}
h1, h2, h3, h4, h5, h6, p, a, li, span, button, input, textarea, select,
label, blockquote, figcaption, th, td, dt, dd, strong, em, small, div {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif !important;
}
code, pre, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace !important;
}

/* ============================================================
   CONTACT PAGE (2026-06-10): email/WhatsApp buttons (raw
   address + number hidden, location removed) + wired form
   states. Buttons + form logic live in enhance.js.
   ============================================================ */
/* On-brand, compact pills matching the footer/nav buttons (navy fill +
   emerald-bordered WhatsApp). Auto-width, side by side, wrap on mobile. */
.pf-contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.pf-contact-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 9999px;
  font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; font-size: 1.4rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.pf-contact-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.pf-contact-btn:hover { transform: translateY(-1px); }
.pf-cb-mail { background: var(--navy, #0F2747); color: #fff; border: 2px solid var(--navy, #0F2747); }
.pf-cb-mail:hover { background: var(--navy-hover, #1a3a5f); border-color: var(--navy-hover, #1a3a5f); }
.pf-cb-wa { background: #fff; color: var(--navy, #0F2747); border: 2px solid #059669; }
.pf-cb-wa:hover { background: #f0f5f1; }

.pf-form-status { margin-top: 12px; font-size: 1.3rem; font-family: 'Poppins', system-ui, sans-serif; font-weight: 400; }
.pf-form-status.pf-err { color: #c0392b; }

.pf-form-done { text-align: center; padding: 30px 10px; }
.pf-form-check {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
  background: rgba(37,211,102,.14); display: flex; align-items: center; justify-content: center; color: #1faa52;
}
.pf-form-check svg { width: 30px; height: 30px; }
.pf-form-done h3 { font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; font-size: 2.1rem; color: var(--ink, #0F2747); margin: 0 0 8px; }
.pf-form-done p { font-family: 'Poppins', system-ui, sans-serif; font-weight: 300; color: var(--gray, #5a6473); font-size: 1.5rem; margin: 0; line-height: 1.6; }