/*
Theme Name: Gobaith Technologies
Theme URI: https://gobaithtechnologies.com/
Author: Gobaith Technologies
Author URI: https://gobaithtechnologies.com/
Description: Private theme for gobaithtechnologies.com. Company site and app landing pages for FleetDoc, Business Card Scanner and Speaker Cleaner. Page content lives in PHP templates rather than the editor, so wpautop can never alter it. Prints no title, meta or canonical tags — Rank Math owns those.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: Proprietary — all rights reserved
Text Domain: gobaith
*/

/* ── tokens ─────────────────────────────────────────────────────────── */
:root{
  color-scheme: light dark;

  --ink:#0E1929;
  --ink-soft:#16243B;
  --body:#3D4A5C;
  --muted:#6B7A8F;
  --line:#E3E8EF;
  --bg:#FFFFFF;
  --soft:#F7F9FC;
  --card:#FFFFFF;

  --ray:#E8761A;
  --ray-light:#FFC15E;

  /* overridden per app page via a style attribute on .app-page */
  --accent:#4F46E5;
  --accent-dark:#312E81;
  --accent-soft:#EEF2FF;

  --radius:14px;
  --wrap:1120px;
  --shadow:0 6px 24px rgba(14,25,41,.07);
}

@media (prefers-color-scheme:dark){
  :root{
    --ink:#E8EEF6; --ink-soft:#CBD6E4; --body:#AEBCCE; --muted:#8697AB;
    --line:#1E2B3B; --bg:#0A1220; --soft:#0E1929; --card:#101C2E;
    --shadow:0 6px 24px rgba(0,0,0,.35);
  }
}

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

html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--body);
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; height:auto}
a{color:var(--accent-dark)}
@media (prefers-color-scheme:dark){ a{color:#A5B4FC} }

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
.narrow{max-width:760px}

h1,h2,h3,h4{color:var(--ink); line-height:1.25; letter-spacing:-.02em; margin:0 0 .55em}
h1{font-size:clamp(2rem,5vw,3.05rem); font-weight:800}
h2{font-size:clamp(1.45rem,3vw,2rem); font-weight:750; margin-top:0}
h3{font-size:1.06rem; font-weight:700; margin-bottom:.35em}
p{margin:0 0 1.05em}
strong{color:var(--ink)}

.skip{position:absolute; left:-9999px}
.skip:focus{left:14px; top:14px; background:#fff; color:#0E1929; padding:10px 16px; z-index:99; border-radius:8px}

/* ── header ─────────────────────────────────────────────────────────── */
.site-head{border-bottom:1px solid var(--line); background:var(--bg); position:relative; z-index:5}
.head-in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); font-weight:700; letter-spacing:-.02em}
.brand img{width:36px; height:36px; border-radius:9px; display:block}
.brand span{font-size:1.06rem}
.brand small{display:block; font-size:.62rem; letter-spacing:.16em; color:var(--muted); font-weight:600; text-transform:uppercase; margin-top:1px}
.nav{display:flex; gap:24px; align-items:center; flex-wrap:wrap}
.nav a{color:var(--body); text-decoration:none; font-size:.95rem; font-weight:500}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{
  background:linear-gradient(160deg,var(--accent-dark) 0%,var(--accent) 58%,var(--accent) 100%);
  color:#fff; padding:76px 0 84px;
}
.hero h1{color:#fff; max-width:17ch}
.hero .lede{font-size:clamp(1.06rem,2vw,1.28rem); color:rgba(255,255,255,.86); max-width:62ch; margin-bottom:1.7em}
.hero small{display:block; margin-top:15px; color:rgba(255,255,255,.7); font-size:.85rem}

.hero-home{background:linear-gradient(160deg,#16243B 0%,#0E1929 55%,#0A1220 100%)}
.hero-home h1{max-width:20ch}

.cta{
  display:inline-block; background:#fff; color:var(--accent-dark);
  font-weight:700; padding:14px 27px; border-radius:999px; text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.cta:hover{background:#F3F5FF}
.cta-ray{background:linear-gradient(100deg,var(--ray),var(--ray-light)); color:#1A1206}
.cta-ray:hover{filter:brightness(1.06)}
.cta-solid{background:var(--accent); color:#fff}
.cta-solid:hover{background:var(--accent-dark)}

/* ── sections ───────────────────────────────────────────────────────── */
.sec{padding:66px 0; border-bottom:1px solid var(--line)}
.sec.soft{background:var(--soft)}
.sec p.intro{max-width:72ch; font-size:1.05rem}
.note{margin-top:26px; color:var(--muted)}
.small{font-size:.92rem}

.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); margin-top:32px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:23px}
.card p{margin:0; color:var(--muted); font-size:.95rem}
.ico{font-size:1.6rem; display:block; margin-bottom:11px; line-height:1}

.cols{display:grid; gap:30px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-top:28px}
ul.tick{list-style:none; padding:0; margin:0}
ul.tick li{padding-left:27px; position:relative; margin-bottom:9px; color:var(--muted)}
ul.tick li::before{content:"\2713"; position:absolute; left:0; color:var(--accent); font-weight:700}

/* ── app cards on the homepage ──────────────────────────────────────── */
.apps{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); margin-top:34px}
.app-card{
  display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--line); border-radius:18px; padding:26px; text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease;
}
.app-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.app-dot{width:42px; height:42px; border-radius:12px; margin-bottom:16px}
.app-card h3{margin-bottom:.3em}
.app-card p{color:var(--muted); font-size:.95rem; margin:0 0 18px}
.app-card .go{margin-top:auto; font-weight:700; font-size:.92rem}

/* ── plans ──────────────────────────────────────────────────────────── */
.plans{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(242px,1fr)); margin-top:30px}
.plan{border:1px solid var(--line); border-radius:var(--radius); padding:25px; background:var(--card)}
.plan.featured{border-color:var(--accent); box-shadow:0 6px 20px rgba(79,70,229,.13)}
.tag{
  display:inline-block; font-size:.71rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; background:var(--accent-soft); color:var(--accent-dark);
  padding:3px 11px; border-radius:999px; margin-bottom:11px;
}

/* ── faq ────────────────────────────────────────────────────────────── */
.faq{border:1px solid var(--line); border-radius:var(--radius); padding:17px 19px; margin-bottom:12px; background:var(--card)}
.faq summary{font-weight:700; cursor:pointer; list-style:none; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+ "; color:var(--accent); font-weight:800}
.faq[open] summary::before{content:"\2013 "}
.faq p{margin:12px 0 0; color:var(--muted)}

/* ── legal pages ────────────────────────────────────────────────────── */
.legal{padding:56px 0 72px}
.legal .updated{color:var(--muted); font-size:.9rem; margin-top:-.4em}
.legal h2{font-size:1.3rem; margin-top:2.1em}
.legal h3{margin-top:1.5em}
.legal ul,.legal ol{color:var(--body); padding-left:22px}
.legal li{margin-bottom:.5em}
.legal table{width:100%; border-collapse:collapse; margin:1.2em 0; font-size:.94rem}
.legal th,.legal td{border:1px solid var(--line); padding:9px 11px; text-align:left; vertical-align:top}
.legal th{background:var(--soft); color:var(--ink)}
.legal-missing{
  border:1px solid #E8761A; background:#FFF7ED; color:#7A3E06;
  border-radius:var(--radius); padding:18px 20px; margin:22px 0;
}
@media (prefers-color-scheme:dark){
  .legal-missing{background:#231B06; border-color:#5C4708; color:#FDE68A}
}

/* ── entry content (ordinary editable pages) ────────────────────────── */
.entry{padding:52px 0 68px}
.entry img{border-radius:var(--radius)}

/* ── footer ─────────────────────────────────────────────────────────── */
.site-foot{background:var(--soft); padding:46px 0 40px; color:var(--muted); font-size:.92rem}
.foot-grid{display:grid; gap:28px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.site-foot h4{font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin-bottom:.9em; font-weight:700}
.site-foot ul{list-style:none; padding:0; margin:0}
.site-foot li{margin-bottom:.5em}
.site-foot a{color:var(--body); text-decoration:none}
.site-foot a:hover{color:var(--ink); text-decoration:underline}
.foot-base{margin-top:34px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* ── 404 ────────────────────────────────────────────────────────────── */
.nf{padding:90px 0 100px; text-align:center}
.nf p{max-width:46ch; margin-left:auto; margin-right:auto}

/* ── editor content keeps a light surface, always ───────────────────────
   Legal pages render the_content() untouched, and the live privacy policies
   carry colours baked in for a white page — color:#1a1a1a and #6b7280 inline.
   On this theme's dark scheme that text is effectively invisible, and the
   policy text must never be edited to fix a styling problem. So any surface
   showing editor content re-declares the light tokens for its own subtree.
   Custom properties set here beat the :root values from the dark media query. */
.legal,.entry{
  --ink:#0E1929; --body:#3D4A5C; --muted:#6B7A8F; --line:#E3E8EF;
  --bg:#FFFFFF; --soft:#F7F9FC; --card:#FFFFFF;
  background:#FFFFFF; color:#3D4A5C;
}
.legal a,.entry a{color:#312E81}

/* Pasted policy text contains a <code> block that is wider than a phone screen.
   It pushed the whole page 40px past the viewport, which is what made the header
   menu look cut off — the nav was sizing itself against an over-wide page, not
   against the screen. The content must not be edited, so anything that can be
   too wide is made to wrap or scroll inside its own box. */
.legal,.entry{overflow-wrap:anywhere}
.legal code,.entry code,.legal pre,.entry pre{
  white-space:pre-wrap; word-break:break-word; max-width:100%; display:inline-block;
}
.legal pre,.entry pre{overflow-x:auto; display:block}
.legal img,.entry img,.legal iframe,.entry iframe{max-width:100%; height:auto}
.legal table,.entry table{display:block; overflow-x:auto; max-width:100%}

@media (max-width:640px){
  /* align-items:flex-start sizes .nav to its content, so flex-wrap never has a
     width to wrap against and the menu runs off the screen. width:100% gives it
     one. This is what broke the mobile menu. */
  .head-in{flex-direction:column; align-items:flex-start; gap:12px}
  .nav{gap:12px 18px; width:100%; flex-wrap:wrap}
  .hero{padding:56px 0 62px}
  .sec{padding:50px 0}
  .legal{padding:40px 0 56px}
}