/*
Theme Name: FreePhoneSpy
Theme URI: https://freephonespy.com/
Author: FreePhoneSpy
Author URI: https://freephonespy.com/
Description: Custom marketing theme for FreePhoneSpy — a transparent parental & family phone-monitoring app. Warm coral palette, editorial type, fast and responsive. Built for deep feature content and clean Google indexing.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: freephonespy
Tags: parental-controls, custom-colors, custom-menu, featured-images, block-styles, wide-blocks, responsive
*/

/* ==========================================================================
   1. Tokens — the FreePhoneSpy "Coral" palette, matched to the app
   ========================================================================== */
:root{
  --coral:#E14E32; --coral-ink:#C6392A; --coral-dark:#A63A1C; --coral-70:#EE8B74;
  --coral-100:#FFE2D8; --coral-50:#FDF1EC;
  --teal:#2F7E86; --teal-ink:#256B72; --teal-100:#E4F4F5; --teal-50:#F0F9FA;
  --ink-900:#2A1A16; --ink-700:#4A382F; --ink-500:#7A6058; --ink-400:#9A857C; --ink-300:#C7B3A9;
  --paper:#FEF7F4; --paper-2:#FBEAE2; --paper-3:#F6E1D7; --surface:#FFFFFF;
  --line:#F1E0D7; --line-2:#ECD6CC;
  --ok:#1E7A46; --ok-100:#DDF0E4; --warn:#B26A00; --warn-100:#FBEED2; --err:#C63A2E;
  --gold:#E0921F;

  --font-display:'Fraunces',ui-serif,Georgia,'Times New Roman',serif;
  --font-body:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;

  --step--1:clamp(.82rem,.79rem + .12vw,.88rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.075rem);
  --step-1:clamp(1.1rem,1.04rem + .3vw,1.25rem);
  --step-2:clamp(1.3rem,1.16rem + .55vw,1.6rem);
  --step-3:clamp(1.55rem,1.32rem + 1vw,2.1rem);
  --step-4:clamp(1.9rem,1.5rem + 1.8vw,2.9rem);
  --step-5:clamp(2.25rem,1.6rem + 2.9vw,3.7rem);

  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(42,26,22,.06),0 2px 6px rgba(42,26,22,.04);
  --sh-2:0 2px 4px rgba(42,26,22,.05),0 10px 26px rgba(42,26,22,.07);
  --sh-3:0 4px 10px rgba(42,26,22,.06),0 24px 56px rgba(42,26,22,.11);

  --wrap:1180px; --wrap-narrow:760px; --gutter:clamp(1.15rem,4vw,2.5rem);
  --sec-y:clamp(3.4rem,6.5vw,6rem);
  --hdr-h:72px; --ease:cubic-bezier(.22,.75,.3,1);
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink-900);font-family:var(--font-body);
  font-size:var(--step-0);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--coral-ink);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.12;letter-spacing:-.01em;color:var(--ink-900);margin:0 0 .5em}
h1{font-size:var(--step-5)} h2{font-size:var(--step-4)} h3{font-size:var(--step-2)} h4{font-size:var(--step-1)}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.3em} li{margin:.35em 0}
strong{font-weight:700}
hr{border:none;border-top:1px solid var(--line);margin:2rem 0}
blockquote{margin:1.5rem 0;padding:1rem 1.4rem;border-left:4px solid var(--coral);background:var(--surface);
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-family:var(--font-display);font-size:var(--step-1);color:var(--ink-700)}
code{background:var(--paper-2);padding:.1em .45em;border-radius:6px;font-size:.9em;font-family:ui-monospace,Menlo,Consolas,monospace}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;z-index:200;background:var(--surface);padding:.6rem 1rem;border-radius:var(--r-sm);box-shadow:var(--sh-2)}

/* ==========================================================================
   3. Layout
   ========================================================================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--sec-y)}
.section--tint{background:var(--paper-2)}
.section--white{background:var(--surface)}
.section--ink{background:#241611;color:#F5E7E1}
.section--ink h1,.section--ink h2,.section--ink h3{color:#fff}
.section--ink p{color:#E4CFC7}
.lede{font-size:var(--step-1);color:var(--ink-700);max-width:62ch}
.eyebrow{display:inline-block;font-weight:700;font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;
  color:var(--teal-ink);margin-bottom:.6rem}
.center{text-align:center} .center .lede{margin-inline:auto}
.muted{color:var(--ink-500)}

/* ==========================================================================
   4. Header / navigation
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:100;background:rgba(254,247,244,.86);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line)}
.site-header__bar{display:flex;align-items:center;gap:1.2rem;height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-weight:700;font-size:1.28rem;
  color:var(--ink-900);letter-spacing:-.02em;flex:none}
.brand:hover{text-decoration:none}
.brand__mark{width:34px;height:34px;border-radius:9px;flex:none;box-shadow:0 4px 12px rgba(225,78,50,.28)}
.brand b{color:var(--coral)}
.primary-nav{margin-left:auto;display:flex;align-items:center;gap:.2rem}
.primary-nav ul{display:flex;list-style:none;margin:0;padding:0;gap:.1rem}
.primary-nav a{display:block;padding:.55rem .8rem;border-radius:var(--r-pill);color:var(--ink-700);font-weight:600;font-size:.97rem}
.primary-nav a:hover{background:var(--paper-2);text-decoration:none;color:var(--ink-900)}
.primary-nav .current-menu-item>a,.primary-nav .current_page_item>a{color:var(--coral-ink)}
.menu-item-has-children{position:relative}
.sub-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-3);padding:.5rem;display:none;flex-direction:column}
.menu-item-has-children:hover>.sub-menu,.menu-item-has-children:focus-within>.sub-menu{display:flex}
.sub-menu a{padding:.5rem .7rem;border-radius:var(--r-sm);font-weight:500}
.header-cta{flex:none;margin-left:.4rem}
.nav-toggle{display:none;margin-left:auto;background:var(--surface);border:1px solid var(--line);width:44px;height:44px;
  border-radius:var(--r-sm);cursor:pointer;align-items:center;justify-content:center}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:20px;height:2px;background:var(--ink-900);position:relative;transition:.2s}
.nav-toggle span::before{position:absolute;top:-6px} .nav-toggle span::after{position:absolute;top:6px}

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.3rem;border-radius:var(--r-pill);
  font-weight:700;font-size:1rem;cursor:pointer;border:1.5px solid transparent;transition:.15s var(--ease);line-height:1.1}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--primary{background:var(--coral);color:#fff;box-shadow:0 6px 18px rgba(225,78,50,.28)}
.btn--primary:hover{background:var(--coral-ink)}
.btn--ghost{background:var(--surface);color:var(--ink-900);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--coral);color:var(--coral-ink)}
.btn--teal{background:var(--teal);color:#fff}
.btn--teal:hover{background:var(--teal-ink)}
.btn--lg{padding:.9rem 1.6rem;font-size:1.08rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.store-badges{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.store-badges img{height:52px;width:auto}

/* ==========================================================================
   6. Hero
   ========================================================================== */
.hero{padding-top:clamp(2.2rem,5vw,4rem);padding-bottom:var(--sec-y);
  background:radial-gradient(1200px 500px at 15% -8%,var(--coral-50),transparent 60%),
             radial-gradient(1000px 460px at 100% 0,var(--teal-50),transparent 55%)}
.hero__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.hero h1{margin-bottom:.35em}
.hero .lede{margin-bottom:1.5rem}
.hero__media{position:relative}
.trust-row{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:1.6rem;color:var(--ink-500);font-size:.94rem;font-weight:500}
.trust-row span{display:inline-flex;align-items:center;gap:.4rem}
.trust-row b{color:var(--ink-900)}

/* ==========================================================================
   7. Screenshot frames (browser + phone)
   ========================================================================== */
.shot{margin:1.6rem 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-2);overflow:hidden}
.shot img{width:100%;display:block}
.shot figcaption,.figcap{font-size:.9rem;color:var(--ink-500);margin-top:.6rem;text-align:center}
.browser{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3);border:1px solid var(--line);background:var(--surface)}
.browser__bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .9rem;background:var(--paper-2);border-bottom:1px solid var(--line)}
.browser__bar i{width:11px;height:11px;border-radius:50%;background:var(--line-2)}
.browser__bar i:nth-child(1){background:#F0A392}.browser__bar i:nth-child(2){background:#F3CE8E}.browser__bar i:nth-child(3){background:#A7D6C0}
.browser__url{margin-left:.6rem;font-size:.8rem;color:var(--ink-500);background:var(--surface);border-radius:var(--r-pill);padding:.2rem .8rem;font-family:ui-monospace,monospace}
.browser img{width:100%;display:block}
.phone{max-width:290px;margin-inline:auto;border:10px solid #241611;border-radius:38px;overflow:hidden;box-shadow:var(--sh-3);background:#241611}
.phone img{width:100%;display:block;border-radius:28px}
.media-tilt{transform:rotate(-1.2deg)}
.media-frame{position:relative}
.media-frame .phone{position:absolute;right:-6%;bottom:-8%;max-width:180px;border-width:8px;border-radius:30px}

/* ==========================================================================
   8. Cards, grids, features
   ========================================================================== */
.grid{display:grid;gap:1.1rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.5rem;box-shadow:var(--sh-1)}
.card--link{transition:.15s var(--ease)}
.card--link:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--coral-100)}
.card h3{font-size:var(--step-1);margin-bottom:.35em}
.card p{margin-bottom:0;color:var(--ink-700);font-size:.98rem}
.card .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:.9rem;
  background:var(--coral-50);color:var(--coral-ink);font-size:1.4rem}
.card .ic--teal{background:var(--teal-50);color:var(--teal-ink)}
.card__more{display:inline-block;margin-top:.7rem;font-weight:700;color:var(--coral-ink);font-size:.95rem}

/* stat row */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1.5rem 0}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem;text-align:center}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.5rem);color:var(--coral-ink);line-height:1}
.stat span{display:block;margin-top:.35rem;color:var(--ink-500);font-size:.9rem}

/* alternating feature blocks */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin:var(--sec-y) 0}
.feature-row:nth-child(even) .feature-row__media{order:-1}
.feature-row__body h2{font-size:var(--step-3)}
.check-list{list-style:none;padding:0;margin:1rem 0}
.check-list li{position:relative;padding-left:1.9rem;margin:.5rem 0;color:var(--ink-700)}
.check-list li::before{content:"";position:absolute;left:0;top:.35em;width:1.15rem;height:1.15rem;border-radius:50%;
  background:var(--ok-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E7A46' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}

/* steps */
.steps{counter-reset:step;display:grid;gap:1.1rem}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.5rem 1.4rem 4rem;position:relative}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:1.2rem;top:1.4rem;width:2rem;height:2rem;
  border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;font-weight:800;font-family:var(--font-display)}
.step h3{font-size:var(--step-1);margin-bottom:.3em}

/* ==========================================================================
   9. Banners / CTA / callouts
   ========================================================================== */
.banner{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(1.8rem,4vw,3rem);
  background:linear-gradient(135deg,var(--coral) 0%,var(--coral-dark) 100%);color:#fff;box-shadow:var(--sh-2)}
.banner--teal{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-ink) 100%)}
.banner h2,.banner h3{color:#fff} .banner p{color:rgba(255,255,255,.9);margin-bottom:1.1rem}
.banner .btn--primary{background:#fff;color:var(--coral-ink);box-shadow:none}
.banner .btn--primary:hover{background:var(--paper-2)}
.banner__deco{position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.09)}
.callout{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--r-sm);
  padding:1.1rem 1.3rem;margin:1.4rem 0}
.callout--coral{border-left-color:var(--coral)}
.callout strong{color:var(--ink-900)}
.note-transparency{background:var(--teal-50);border:1px solid var(--teal-100);border-radius:var(--r);padding:1.2rem 1.4rem;margin:1.4rem 0}
.note-transparency b{color:var(--teal-ink)}

/* pills / badges */
.pill{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.02em;padding:.25rem .7rem;border-radius:var(--r-pill)}
.pill--coral{background:var(--coral-100);color:var(--coral-ink)}
.pill--teal{background:var(--teal-100);color:var(--teal-ink)}
.pill--ok{background:var(--ok-100);color:var(--ok)}

/* comparison / table */
.table-wrap{overflow-x:auto;margin:1.4rem 0}
table.data{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
table.data th,table.data td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--line);font-size:.96rem}
table.data th{background:var(--paper-2);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-500)}
table.data tr:last-child td{border-bottom:none}

/* FAQ */
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);margin:.6rem 0;padding:0 1.2rem}
.faq summary{cursor:pointer;font-weight:700;padding:1rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem;color:var(--ink-900)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--coral);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details[open]{padding-bottom:.6rem}
.faq details>p{margin-top:0;color:var(--ink-700)}

/* pros/cons */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.4rem 0}
.pc>div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.4rem}
.pc h4{margin-bottom:.6em}

/* ==========================================================================
   10. Article / blog
   ========================================================================== */
.article{max-width:var(--wrap-narrow);margin-inline:auto}
.article h2{margin-top:1.8em;font-size:var(--step-2)}
.article h3{margin-top:1.4em;font-size:var(--step-1)}
.article img,.article .shot{border-radius:var(--r-sm)}
.post-meta{color:var(--ink-500);font-size:.9rem;margin-bottom:1.5rem;display:flex;gap:1rem;flex-wrap:wrap}
.entry-title--page{font-size:var(--step-4);max-width:20ch}
.page-head{padding-top:clamp(1.6rem,4vw,3rem)}
.breadcrumbs{font-size:.85rem;color:var(--ink-500);margin-bottom:1rem}
.breadcrumbs a{color:var(--ink-500)} .breadcrumbs a:hover{color:var(--coral-ink)}
.post-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1);transition:.15s var(--ease);display:flex;flex-direction:column}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.post-card__img{aspect-ratio:16/9;overflow:hidden;background:var(--paper-2)}
.post-card__img img{width:100%;height:100%;object-fit:cover}
.post-card__body{padding:1.2rem 1.3rem}
.post-card h3{font-size:var(--step-1);margin-bottom:.3em}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.4rem;margin:1.5rem 0}
.toc strong{display:block;margin-bottom:.5rem} .toc ul{margin:0;padding-left:1.1rem}

/* ==========================================================================
   11. Footer
   ========================================================================== */
.site-footer{background:#241611;color:#D9C4BB;padding-block:clamp(2.6rem,5vw,4rem) 2rem;margin-top:2rem}
.site-footer a{color:#E9D6CE}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
.footer-brand .brand{color:#fff}
.footer-brand p{color:#C3A99F;font-size:.94rem;max-width:34ch}
.footer-col h4{color:#fff;font-family:var(--font-body);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.9rem}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:.4rem 0}
.footer-col a{font-size:.94rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:2.2rem;padding-top:1.4rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.85rem;color:#B7998E}
.footer-bottom a{color:#B7998E;text-decoration:underline}

/* ==========================================================================
   12. Utilities & responsive
   ========================================================================== */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-2{margin-top:2rem}.mb-2{margin-bottom:2rem}
.maxw{max-width:var(--wrap-narrow);margin-inline:auto}
.text-center{text-align:center}
.hide-desktop{display:none}

@media (max-width:960px){
  .hero__grid,.feature-row{grid-template-columns:1fr}
  .feature-row:nth-child(even) .feature-row__media{order:0}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .primary-nav,.header-cta{display:none}
  .nav-toggle{display:flex}
  .primary-nav.is-open{display:block;position:fixed;inset:var(--hdr-h) 0 0;background:var(--paper);padding:1.2rem var(--gutter);overflow:auto}
  .primary-nav.is-open ul{flex-direction:column;gap:.2rem}
  .primary-nav.is-open a{padding:.8rem .4rem;font-size:1.1rem;border-bottom:1px solid var(--line);border-radius:0}
  .primary-nav.is-open .sub-menu{position:static;display:block;box-shadow:none;border:none;padding:0 0 0 1rem}
}
@media (max-width:600px){
  .grid-2,.grid-3,.grid-4,.pc{grid-template-columns:1fr}
  h1{font-size:var(--step-4)}
  .store-badges img{height:46px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}