/* ==================================================
   INNER PAGE STYLES — brings /about, /online-tax, /pricing, /faq, /contact
   and the deduction guides onto the same visual language as the homepage.

   The homepage loads index_style.css; every other page loads
   assets/css/bootstrap.min.css + assets/css/style.css, an older template.
   That is why the inner pages looked like a different site. This file is
   loaded AFTER those, so it wins on source order.

   Colours come from the CSS custom properties header.php emits from
   config.php $site['theme'] — do not hardcode brand colours here.

   Design tokens mirrored from index_style.css:
     card      #fff, 1px var(--border), radius 24px, --page-shadow
     button    pill 999px, weight 900, var(--blue-mid), lift on hover
     eyebrow   var(--red), 13px, 900, uppercase, .08em tracking
     h2        clamp(30px,3vw,44px), weight 900, -.03em
================================================== */

:root{
    --page-shadow:0 18px 45px rgba(0,48,73,.12);
    --page-shadow-sm:0 8px 24px rgba(0,48,73,.08);
    --page-max:1180px;
}

/* ── Shared shell ────────────────────────────────────────────────────────── */
.seo-hero .container,
.seo-body .container,
.seo-article-hero .container,
.seo-article-body .container,
.faq-area .container,
.contact-area .container{max-width:var(--page-max);margin:0 auto;padding:0 22px}

/* ── Hero band ───────────────────────────────────────────────────────────── */
/* Was a flat #0f3557 slab (or, on faq/contact, a stock "CONTACT US" photo).
   Now the homepage's navy gradient with a soft accent bloom. */
.seo-hero,
.seo-article-hero,
.site-breadcrumb{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:linear-gradient(135deg,
        var(--blue-dark) 0%,
        color-mix(in srgb, var(--blue-dark) 82%, #0a6ca8) 55%,
        color-mix(in srgb, var(--blue-dark) 70%, #0a6ca8) 100%);
    color:#fff;
    padding:104px 0 76px;
    text-align:left;
}
.seo-hero::after,
.seo-article-hero::after,
.site-breadcrumb::after{
    content:"";
    position:absolute;
    inset:auto -8% -40% auto;
    width:460px;height:460px;
    background:color-mix(in srgb, var(--blue-mid) 26%, transparent);
    border-radius:50%;
    filter:blur(10px);
    z-index:-1;
}

.seo-hero h1,
.seo-article-hero h1,
.site-breadcrumb .breadcrumb-title{
    color:#fff;
    font-size:clamp(34px,4vw,54px);
    font-weight:900;
    line-height:1.08;
    letter-spacing:-.03em;
    margin:0 0 18px;
    max-width:900px;
}
.seo-hero p,
.seo-article-hero p{
    color:rgba(255,255,255,.9);
    font-size:clamp(17px,1.5vw,19px);
    line-height:1.65;
    max-width:760px;
    margin:0;
}

/* Breadcrumbs */
.seo-crumbs,
.seo-article-crumbs,
.site-breadcrumb .breadcrumb-menu{
    display:flex;flex-wrap:wrap;gap:8px;align-items:center;
    list-style:none;margin:0 0 18px;padding:0;
    font-size:13.5px;font-weight:700;
    color:rgba(255,255,255,.78);
    text-transform:none;
}
.seo-crumbs a,
.seo-article-crumbs a,
.site-breadcrumb .breadcrumb-menu a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.seo-crumbs a:hover,
.seo-article-crumbs a:hover,
.site-breadcrumb .breadcrumb-menu a:hover{border-bottom-color:#fff}
.site-breadcrumb .breadcrumb-menu li{list-style:none}
.site-breadcrumb .breadcrumb-menu li::after{content:"/";margin-left:8px;opacity:.5}
.site-breadcrumb .breadcrumb-menu li:last-child::after{content:""}

/* ── Body sections ───────────────────────────────────────────────────────── */
.seo-body,
.seo-article-body,
.faq-area,
.contact-area{background:#fff;padding:78px 0}
.faq-area.py-120,
.contact-area.py-120{padding:78px 0}

.seo-grid,
.seo-article-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    gap:34px;
    align-items:start;
}

/* ── Content card ────────────────────────────────────────────────────────── */
.seo-panel,
.seo-content,
.seo-article-card,
.seo-article-content{
    background:#fff;
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:var(--page-shadow);
    padding:34px 36px;
}
.seo-panel h2,
.seo-content h2,
.seo-article-content h2{
    color:var(--blue-dark);
    font-size:clamp(23px,2vw,30px);
    font-weight:900;
    letter-spacing:-.02em;
    line-height:1.2;
    margin:34px 0 12px;
}
.seo-panel h2:first-child,
.seo-content h2:first-child,
.seo-article-content h2:first-child{margin-top:0}
.seo-panel h3,
.seo-content h3,
.seo-article-content h3{color:var(--blue-dark);font-size:19px;font-weight:800;margin:24px 0 8px}
.seo-panel p,
.seo-content p,
.seo-article-content p{
    color:var(--text-body);
    font-size:16.5px;
    line-height:1.72;
    margin:0 0 14px;
    max-width:68ch;          /* keeps line length readable */
}
.seo-panel ul,
.seo-content ul,
.seo-article-content ul{margin:0 0 18px;padding:0;list-style:none}
.seo-panel ul li,
.seo-content ul li,
.seo-article-content ul li{
    position:relative;
    padding-left:30px;
    margin-bottom:10px;
    font-size:16.5px;
    line-height:1.65;
    color:var(--text-body);
}
/* Tick marker instead of a bare disc — matches the footer's check motif. */
.seo-panel ul li::before,
.seo-content ul li::before,
.seo-article-content ul li::before{
    content:"";
    position:absolute;left:0;top:.45em;
    width:16px;height:9px;
    border-left:2.5px solid var(--blue-mid);
    border-bottom:2.5px solid var(--blue-mid);
    transform:rotate(-45deg);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.seo-links,
.seo-aside,
.seo-article-aside{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:var(--page-shadow-sm);
    padding:26px 24px;
    display:flex;
    flex-direction:column;
    gap:2px;
    position:sticky;
    top:96px;
}
.seo-links h2,
.seo-aside h2,
.seo-article-aside h2{
    color:var(--blue-dark);
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin:0 0 14px;
}
.seo-links a,
.seo-aside a,
.seo-article-aside a{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:13px 2px;
    border:0;border-bottom:1px solid var(--border);
    border-radius:0;
    color:var(--blue-dark);
    font-weight:700;font-size:15.5px;
    text-decoration:none;
    transition:color .18s ease,padding-left .18s ease;
}
.seo-links a:last-child,
.seo-aside a:last-child,
.seo-article-aside a:last-child{border-bottom:0}
.seo-links a::after,
.seo-aside a::after,
.seo-article-aside a::after{content:"›";color:var(--blue-mid);font-weight:900;font-size:19px;line-height:1}
.seo-links a:hover,
.seo-aside a:hover,
.seo-article-aside a:hover{color:var(--blue-mid);padding-left:6px}

/* pricing.php uses .seo-links as a full-width link row, not a sidebar */
.seo-body .seo-links:not(aside){
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:0 26px;
    position:static;
    margin-top:30px;
}

/* ── CTA panel ───────────────────────────────────────────────────────────── */
.seo-cta,
.seo-article-cta{
    margin-top:32px;
    background:linear-gradient(135deg, var(--blue-dark), color-mix(in srgb, var(--blue-dark) 72%, #0a6ca8));
    border:0;
    border-radius:24px;
    box-shadow:var(--page-shadow);
    padding:34px 36px;
    color:#fff;
}
.seo-cta h2,
.seo-article-cta h2{color:#fff;font-size:clamp(22px,2vw,28px);font-weight:900;letter-spacing:-.02em;margin:0 0 10px}
.seo-cta p,
.seo-article-cta p{color:rgba(255,255,255,.88);font-size:16.5px;line-height:1.65;margin:0 0 22px;max-width:60ch}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.seo-body .theme-btn,
.seo-article-body .theme-btn,
.faq-area .theme-btn,
.contact-area .theme-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--blue-mid);
    color:#fff;
    border:0;
    border-radius:999px;
    padding:14px 26px;
    font-weight:900;font-size:15.5px;
    letter-spacing:0;
    text-transform:none;
    text-decoration:none;
    box-shadow:0 12px 30px color-mix(in srgb, var(--blue-mid) 30%, transparent);
    transition:background .2s ease, transform .2s ease;
}
.seo-body .theme-btn:hover,
.seo-article-body .theme-btn:hover,
.faq-area .theme-btn:hover,
.contact-area .theme-btn:hover{background:var(--red-dark);transform:translateY(-2px);color:#fff}
.seo-cta .theme-btn,
.seo-article-cta .theme-btn{background:var(--hero-highlight);color:var(--blue-dark);box-shadow:none}
.seo-cta .theme-btn:hover,
.seo-article-cta .theme-btn:hover{background:#fff;color:var(--blue-dark)}

/* ── Callout note ────────────────────────────────────────────────────────── */
.seo-note,
.seo-article-note{
    margin-top:28px;
    background:var(--surface);
    border:1px solid var(--border);
    border-left:5px solid var(--blue-mid);
    border-radius:16px;
    padding:20px 24px;
    box-shadow:none;
}
.seo-note p,
.seo-article-note p{margin:0;font-size:15.5px;line-height:1.65;color:var(--text-body)}

.seo-article-meta{color:rgba(255,255,255,.75);font-size:13.5px;font-weight:600;margin-top:14px}

/* ── Pricing cards ───────────────────────────────────────────────────────── */
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pricing-card{
    position:relative;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:var(--page-shadow);
    padding:34px 30px;
    display:flex;flex-direction:column;
    transition:transform .2s ease, box-shadow .2s ease;
}
.pricing-card:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(0,48,73,.16)}
.pricing-card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:5px;
    background:linear-gradient(90deg, var(--blue-mid), var(--hero-highlight));
}
.pricing-card h2{color:var(--blue-dark);font-size:22px;font-weight:900;margin:0 0 6px;letter-spacing:-.01em}
.pricing-card .price{color:var(--blue-dark);font-size:38px;font-weight:900;letter-spacing:-.03em;margin:6px 0 18px}
.pricing-card p{color:var(--text-body);font-size:15.5px;line-height:1.65;margin:0 0 18px}
.pricing-card ul{list-style:none;padding:0;margin:0 0 24px}
.pricing-card li{position:relative;padding-left:28px;margin-bottom:9px;font-size:15px;line-height:1.6;color:var(--text-body)}
.pricing-card li::before{
    content:"";position:absolute;left:0;top:.4em;
    width:14px;height:8px;
    border-left:2.5px solid var(--blue-mid);
    border-bottom:2.5px solid var(--blue-mid);
    transform:rotate(-45deg);
}
.pricing-card .theme-btn{margin-top:auto;align-self:flex-start}

/* ── FAQ accordion (bootstrap template markup) ───────────────────────────── */
.faq-area{background:var(--surface)}
.faq-area .site-title{color:var(--blue-dark);font-size:clamp(28px,3vw,40px);font-weight:900;letter-spacing:-.03em;line-height:1.14}
.faq-area .site-title-tagline{color:var(--red);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.faq-area .accordion-item{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px !important;
    box-shadow:var(--page-shadow-sm);
    margin-bottom:14px;
    overflow:hidden;
}
.faq-area .accordion-button{
    background:#fff;
    color:var(--blue-dark);
    font-weight:800;
    font-size:16.5px;
    line-height:1.45;
    padding:20px 22px;
    box-shadow:none;
    border:0;
}
.faq-area .accordion-button:not(.collapsed){color:var(--blue-mid);background:#fff}
.faq-area .accordion-button:focus{box-shadow:none;border-color:var(--border)}
.faq-area .accordion-body{color:var(--text-body);font-size:16px;line-height:1.7;padding:0 22px 22px}
.faq-area .about-list li{color:var(--text-body);font-size:16px;line-height:1.7;margin-bottom:8px}

/* ── Contact page info cards ─────────────────────────────────────────────── */
.contact-area .contact-info{
    background:#fff;
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:var(--page-shadow-sm);
    padding:26px 22px;
    height:100%;
    transition:transform .2s ease, box-shadow .2s ease;
}
.contact-area .contact-info:hover{transform:translateY(-3px);box-shadow:var(--page-shadow)}
/* The disc is style.css's own orange (#F36800); align it to the brand token.
   The icon inside stays white — it sits ON the disc, not beside it. */
.contact-area .contact-info-icon{background:var(--blue-mid)}
.contact-area .contact-info-icon::before{border-color:var(--blue-mid)}
.contact-area .contact-info-icon .ptx-ico{color:#fff}
.contact-area .contact-info-content h5{color:var(--blue-dark);font-weight:900;font-size:17px;margin:14px 0 8px}
.contact-area .contact-info-content p{color:var(--text-body);font-size:15px;line-height:1.6;margin:0}
.contact-area .contact-info-content a{color:var(--blue-mid);font-weight:700}
/* style.css uses `.contact-form .form-group .form-control` (0,3,0), which beats
   a two-class selector no matter the source order — hence the long form here. */
.contact-area .contact-form .form-group .form-control,
.contact-area .contact-form .form-group textarea.form-control{
    border:1px solid var(--border);
    border-radius:12px;
    padding:13px 16px;
    font-size:15.5px;
    color:var(--text-body);
    background:#fff;
}
.contact-area .contact-form .form-group .form-control:focus{
    border-color:var(--blue-mid);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--blue-mid) 18%, transparent);
    outline:0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:1000px){
    .seo-grid,
    .seo-article-grid{grid-template-columns:1fr}
    .seo-links,
    .seo-aside,
    .seo-article-aside{position:static}
    .pricing-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
    .seo-hero,
    .seo-article-hero,
    .site-breadcrumb{padding:76px 0 54px}
    .seo-panel,
    .seo-content,
    .seo-article-card,
    .seo-article-content,
    .seo-cta,
    .seo-article-cta{padding:26px 22px;border-radius:18px}
    .seo-body,
    .seo-article-body,
    .faq-area,
    .contact-area{padding:52px 0}
}
@media (prefers-reduced-motion: reduce){
    .pricing-card,
    .contact-area .contact-info,
    .seo-body .theme-btn,
    .seo-article-body .theme-btn{transition:none}
    .pricing-card:hover,
    .contact-area .contact-info:hover,
    .seo-body .theme-btn:hover{transform:none}
}

/* ── FAQ / Contact intro blocks ──────────────────────────────────────────── */
/* These two pages put a bare <h1> and a very long <p> straight inside
   .container, so the copy ran the full 1180px — roughly 160 characters a line.
   Constrain it and give it the same type scale as the card headings. */
.faq-area > .container > h1,
.contact-area > .container > h1{
    color:var(--blue-dark);
    font-size:clamp(28px,3vw,40px);
    font-weight:900;
    letter-spacing:-.03em;
    line-height:1.14;
    margin:0 0 16px;
    max-width:20ch;
}
.faq-area > .container > p,
.contact-area > .container > p{
    color:var(--text-body);
    font-size:16.5px;
    line-height:1.75;
    max-width:72ch;
    margin:0 0 26px;
}
.faq-area > .container > p b,
.contact-area > .container > p b{color:var(--blue-dark)}

.faq-right,
.contact-area .contact-form{
    background:#fff;
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:var(--page-shadow);
    padding:30px 32px;
}
.faq-right p{color:var(--text-body);font-size:16px;line-height:1.7;max-width:62ch}
.faq-right img{border-radius:16px;margin:6px 0 4px;height:auto}
.faq-right a:not(.theme-btn){color:var(--blue-mid);font-weight:700}
.faq-area .site-heading{margin-bottom:6px}
.faq-area .site-title span{color:var(--blue-mid)}
.faq-area .site-title-tagline i{margin-right:7px;color:var(--red)}

.contact-area .contact-form-header h2{
    color:var(--blue-dark);font-size:clamp(22px,2vw,28px);
    font-weight:900;letter-spacing:-.02em;margin:0 0 8px;
}
.contact-area .contact-form-header p{color:var(--text-body);font-size:15.5px;line-height:1.65;margin:0 0 20px;max-width:60ch}
.contact-area .contact-img img{border-radius:24px;box-shadow:var(--page-shadow);height:auto}
.contact-area .form-messege{font-size:15px;font-weight:700}

/* ── Font Awesome replacement ────────────────────────────────────────────── */
/* all-fontawesome.min.css (503 KB raw / 92 KB over the wire, render-blocking)
   was loaded on eight pages to draw eight icons. Those are inline SVG now via
   ptx_icon(). style.css also drew this list marker with a Font Awesome glyph
   (`content:"\f058"; font-family:"Font Awesome 6 Pro"`), so it is redrawn in
   plain CSS here — without this the FAQ page's 12 list items lose their ticks. */
.about-list li{position:relative;padding-left:30px;list-style:none}
.about-list li::before{
    content:"" !important;
    font-family:inherit !important;
    position:absolute;left:1px;top:.5em;
    width:15px;height:8px;
    border-left:2.5px solid var(--blue-mid);
    border-bottom:2.5px solid var(--blue-mid);
    transform:rotate(-45deg);
}

/* Inline icons sit on the text baseline and inherit colour and size. */
.ptx-ico{display:inline-block;vertical-align:-.14em;flex:none}
.contact-info-icon .ptx-ico{font-size:30px;vertical-align:middle}
.site-title-tagline .ptx-ico{font-size:15px;margin-right:7px;vertical-align:-.18em}
.accordion-button .ptx-ico{font-size:19px;margin-right:10px;color:var(--blue-mid)}
.theme-btn .ptx-ico{font-size:17px}

/* ── Numbered process steps (/online-tax) ────────────────────────────────── */
.ttx-steps{list-style:none;counter-reset:ttxstep;margin:0 0 20px;padding:0}
.ttx-steps li{
    position:relative;
    counter-increment:ttxstep;
    padding-left:52px;
    margin-bottom:18px;
    font-size:16.5px;
    line-height:1.7;
    color:var(--text-body);
    min-height:34px;
}
.ttx-steps li::before{
    content:counter(ttxstep);
    position:absolute;left:0;top:-2px;
    width:34px;height:34px;
    border-radius:50%;
    background:var(--blue-mid);
    color:#fff;
    font-weight:900;font-size:16px;
    display:flex;align-items:center;justify-content:center;
    /* override the tick marker inherited from .seo-panel ul li */
    border:0;transform:none;
}
.ttx-steps li strong{color:var(--blue-dark)}

/* Two-up option cards inside a content panel, rather than the 3-up pricing grid */
.pricing-grid--two{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 8px}
.seo-panel .pricing-card{padding:28px 26px}
.seo-panel .pricing-card h3{color:var(--blue-dark);font-size:21px;font-weight:900;margin:0 0 6px;letter-spacing:-.01em}
.seo-panel .pricing-card .price{font-size:30px;margin:4px 0 14px}
@media(max-width:900px){.pricing-grid--two{grid-template-columns:1fr}}