/* ==========================================================================
   HunorNet brand layer - overrides the template palette only.
   Logo colours: vermilion #df5327, warm grey #8c8c8c.
   ========================================================================== */
:root {
    --base1: 223 83 39;              /* rgb - vermilion */
    --base2: 60 72 84;               /* rgb - slate */
    --base3: 140 140 140;            /* rgb - warm grey */
    --color1: #ef7346;
    --color2: #c33f17;
    --color3: #3c4854;
    --color4: #1d242c;
    --color5: #df5327;
    --color6: #a8340f;
    --primary: 14 75% 51%;           /* vermilion */
    --secondary: 210 17% 38%;
    --accent-h: 210;
    --accent-s: 18%;
    --accent-l: 12%;
    --heading: #1d242c;
}

/* The template ships a neon gradient on hero and buttons; tone it to brand. */
:root {
    --gradient-one: linear-gradient(97deg, var(--color1) 0%, var(--color2) 100%);
    --gradient-two: linear-gradient(90deg, var(--color3) -6.06%, var(--color4) 64.49%);
    --gradient-three: linear-gradient(90deg, var(--color5) -6.06%, var(--color6) 64.49%);
}

/* Logo is a wide wordmark, not the template's square mark. */
.logo img, .footer-widget .logo img { max-height: 54px; width: auto; }
.preloader { display: none !important; }

/* Editor content: make classic-editor output look right inside the shell. */
.entry-content { font-size: 1.0625rem; line-height: 1.8; }
.entry-content h2 { margin-top: 2.5rem; margin-bottom: 1rem; }
.entry-content h3 { margin-top: 2rem; margin-bottom: .75rem; }
.entry-content ul, .entry-content ol { margin-bottom: 1.5rem; padding-left: 1.25rem; }
.entry-content li { margin-bottom: .5rem; }
.entry-content img { max-width: 100%; height: auto; }
.entry-content table { width: 100%; margin-bottom: 1.5rem; }
.entry-content blockquote {
    border-left: 4px solid rgb(var(--base1));
    padding: .25rem 0 .25rem 1.25rem;
    margin: 1.75rem 0;
    font-style: italic;
    color: var(--heading);
}
.entry-content .lead { font-size: 1.25rem; line-height: 1.7; color: var(--heading); }

/* A plain, no-plugin case-study/fact grid the classic editor can emit. */
.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.fact { border: 1px solid hsl(var(--border)); border-radius: 12px; padding: 1.5rem; }
.fact strong { display: block; font-size: 1.75rem; color: rgb(var(--base1)); line-height: 1.2; }
.fact span { display: block; margin-top: .35rem; font-size: .9375rem; }

/* Skip link - accessibility, not in the original template. */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
    left: 1rem; top: 1rem; z-index: 9999; background: #fff; color: #1d242c;
    padding: .75rem 1.25rem; border-radius: 6px; box-shadow: 0 2px 12px rgba(0,0,0,.2);
}

/* ==========================================================================
   Header contrast.
   The template turns .header.sticky white on scroll, which erases a light
   logo the moment the page moves. Keep the bar dark in both states instead,
   so one logo works everywhere.
   ========================================================================== */
.header.sticky {
    background: #1a2028;
    box-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.header.header--dark.sticky .menu > li > a { color: hsl(var(--white)); }
.header.header--dark .menu > li > a:hover,
.header.header--dark.sticky .menu > li > a:hover { color: rgb(var(--base1)); }

/* Sub-menus and the mobile drawer need the same treatment. */
@media (max-width: 991px) {
    .header.header--dark .menu { background: #1a2028; }
    .header.header--dark .menu > li > a { color: hsl(var(--white)); }
}

/* Give the hero enough dark ground under the fixed header for the logo to sit on. */
.banner-section, .inner-banner {
    background-position: center center !important;
    background-size: cover !important;
}
.inner-banner { padding-top: 170px; padding-bottom: 80px; }

/* Secondary hero button: the template's outline-light renders its label in a
   muted grey that sits too close to the background on the dark hero. */
/* main.css declares .btn--outline-light twice; the second wins with
   `color: var(--body) !important`, which is a muted grey on a dark hero. */
.btn--outline-light {
    color: hsl(var(--white)) !important;
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, .55) !important;
}
.btn--outline-light:hover {
    background: hsl(var(--white)) !important;
    color: #1a2028 !important;
    border-color: hsl(var(--white)) !important;
}

/* ==========================================================================
   Hero — the mark carries the identity here, so the header wordmark stands
   down until the page scrolls. Fixes the dead band the template left between
   the fixed header and the first line of copy.
   ========================================================================== */
/* Two columns from lg up: the mark and wordmark on the left, the argument on
   the right. Stacking them wasted the full width of the page and pushed the
   logo into the middle of the screen. */
.hero { padding-top: 124px; padding-bottom: 84px; }
.hero-identity { text-align: center; }
.hero-mark {
    width: 190px; height: auto; margin: 0 auto 20px;
    display: block;
    filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .55));
}
.hero-copy h1 {
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    line-height: 1.16;
}
.hero-copy .lead { max-width: 62ch; }

@media (min-width: 992px) {
    .hero { padding-top: 132px; padding-bottom: 92px; }
    /* Identity stays centred in its column: left-aligning it squared the block
       off against the copy and made the whole hero read as two hard rectangles. */
    .hero-identity { text-align: center; }
    .hero-mark { width: 200px; }
    .hero-copy { padding-left: 1.5rem; }
}
.hero-eyebrow {
    margin: 0 0 18px; line-height: 1.5;
    font-family: var(--heading-font);
}
.hero-eyebrow > span,
.hero-eyebrow { display: block; }
.hero-eyebrow {
    font-size: 1.35rem; font-weight: 600; letter-spacing: .01em;
    color: hsl(var(--white));
}
.hero-eyebrow > span {
    margin-top: 6px;
    font-size: .8125rem; font-weight: 500; letter-spacing: .16em;
    text-transform: uppercase; color: rgb(var(--base1));
}
.hero h1 { margin-bottom: 22px; }
.hero .lead { margin-bottom: 34px; }

/* On the front page the hero already shows the mark; don't repeat it in the
   bar above. It returns as soon as the header goes sticky. */
.home .header:not(.sticky) .logo { opacity: 0; pointer-events: none; }
.header .logo { transition: opacity .25s ease; }

/* Inner banners were over-tall for the amount of content in them. */
.inner-banner { padding-top: 150px; padding-bottom: 66px; }
.inner-banner .title { font-size: clamp(2rem, 5vw, 3rem); }

/* The template paints decorative background images on the footer that the
   ThemeForest download never shipped. Drop them rather than 404 on every page. */
.footer-bottom::before,
.footer-two .footer-bottom::before,
.plan-item__header { background-image: none !important; }

/* ==========================================================================
   Forms. The template's .form--control is not full-width and .form-label is
   not a block, so labels sat inline beside their inputs and fields floated.
   ========================================================================== */
.form-label {
    display: block; width: 100%;
    margin-bottom: .4rem;
    font-size: .9375rem; font-weight: 500; color: var(--heading);
}
.form--control {
    display: block; width: 100%;
    padding: .75rem 1rem;
    border: 1px solid hsl(var(--border));
    border-radius: 8px;
    background: hsl(var(--white));
    color: var(--heading);
    font-family: var(--body-font); font-size: 1rem; line-height: 1.5;
}
.form--control:focus {
    outline: none;
    border-color: rgb(var(--base1));
    box-shadow: 0 0 0 3px rgb(var(--base1) / .18);
}
textarea.form--control { min-height: 168px; resize: vertical; }

/* ==========================================================================
   Sidebar widgets. h4 was inheriting the display scale and rendering the
   widget titles larger than the post titles beside them.
   ========================================================================== */
.sidebar .widget-title,
.footer-widget .widget-title {
    font-size: 1.125rem; font-weight: 600; line-height: 1.3;
    margin-bottom: 1rem;
}
.sidebar .widget {
    background: hsl(var(--white));
    border: 1px solid hsl(var(--border));
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
}
.sidebar .widget ul { list-style: none; margin: 0; padding: 0; }
.sidebar .widget li { padding: .35rem 0; font-size: .9375rem; }
.sidebar .widget li + li { border-top: 1px solid hsl(var(--border)); }

/* The lead paragraph ran straight into the body copy with no gap. */
.entry-content .lead { margin-bottom: 1.5rem; }
.entry-content > p:first-child { margin-top: 0; }

/* Paragraph rhythm: 14px collapsed too tightly for 17px/1.8 body copy. */
.entry-content p { margin-block: 0 1.15rem; }
.entry-content p:last-child { margin-bottom: 0; }

/* Practice cards: blurbs differ in length, so pin the meta line and the link
   to the bottom rather than letting them ride up against short copy. */
.practice-card .practice-meta { margin-top: auto; padding-top: .75rem; }

/* The template resets every ul/ol to list-style:none, which strips the markers
   from ordinary editor prose too. Restore them inside content only. */
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content ul,
.entry-content ol { padding-left: 1.4rem; margin: 0 0 1.25rem; }
.entry-content li {
    margin-bottom: .45rem;
    font-size: 1.0625rem;
    line-height: 1.75;
    padding-left: .25rem;
}
.entry-content li::marker { color: rgb(var(--base1)); }
.entry-content li > strong:first-child { color: var(--heading); }

/* Content type scale. The template's display sizes are tuned for marketing
   sections, not for prose — h2 landed near 44px against 17px body, which
   wraps long headings and flattens the hierarchy below them. */
.entry-content h2 {
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    line-height: 1.25; margin-top: 2.75rem; margin-bottom: .85rem;
}
.entry-content h3 {
    font-size: clamp(1.15rem, 1.7vw, 1.3rem);
    line-height: 1.35; margin-top: 2rem; margin-bottom: .6rem;
}
.entry-content h2:first-child,
.entry-content h3:first-child { margin-top: 0; }
.entry-content h2 + p,
.entry-content h3 + p { margin-top: 0; }

/* Full-width template: keep the container wide for the fact tiles, but hold
   prose to a readable measure instead of letting lines run ~1300px. */
.page-template-template-wide .entry-content > *:not(.fact-grid) { max-width: 74ch; }
.page-template-template-wide .entry-content .fact-grid { max-width: none; }

/* ==========================================================================
   Ask HunorNet panel
   Self-hosted, no third-party widget. Fixed bottom-right, which is where
   people now look for it without being told.
   ========================================================================== */
.hn-chat { position: fixed; right: 20px; z-index: 900;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

.hn-chat__launch {
    display: flex; align-items: center; gap: .6rem;
    padding: .85rem 1.25rem;
    border: 0; border-radius: 999px;
    background: rgb(var(--base1)); color: #fff;
    font-family: var(--heading-font); font-size: .9375rem; font-weight: 500;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
    transition: transform .2s ease, box-shadow .2s ease;
}
.hn-chat__launch:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0, 0, 0, .38); }
.hn-chat__launch-icon i { font-size: 1.25rem; display: block; }
.hn-chat.is-open .hn-chat__launch { opacity: 0; pointer-events: none; }

.hn-chat__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #9aa4ae; flex: 0 0 auto;
}
.hn-chat__dot.is-open { background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .22); }

.hn-chat__panel {
    position: absolute; right: 0; bottom: 0;
    width: min(380px, calc(100vw - 32px));
    max-height: min(620px, calc(100vh - 100px));
    display: flex; flex-direction: column;
    background: #fff; color: #3c4854;
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .34);
}
.hn-chat__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.15rem; background: #1a2028; color: #fff;
}
.hn-chat__title { margin: 0; font-family: var(--heading-font); font-weight: 600; font-size: 1.0625rem; }
.hn-chat__status {
    margin: .3rem 0 0; font-size: .75rem; color: #b9c2cb;
    display: flex; align-items: center; gap: .45rem;
}
.hn-chat__close { background: none; border: 0; color: #b9c2cb; font-size: 1.35rem; cursor: pointer; line-height: 1; }
.hn-chat__close:hover { color: #fff; }

.hn-chat__log {
    flex: 1 1 auto; overflow-y: auto; padding: 1.15rem;
    display: grid; gap: .8rem; align-content: start;
    min-height: 120px;
}
.hn-chat__msg p { margin: 0; font-size: .9375rem; line-height: 1.6; }
.hn-chat__msg--them p {
    background: #f1f0ee; border-radius: 4px 14px 14px 14px;
    padding: .75rem .9rem; color: #2b3540;
}
.hn-chat__msg--me { justify-self: end; max-width: 85%; }
.hn-chat__msg--me p {
    background: rgb(var(--base1)); color: #fff;
    border-radius: 14px 4px 14px 14px; padding: .65rem .9rem;
}
.hn-chat__more {
    display: inline-block; margin-top: .55rem;
    font-size: .8125rem; font-weight: 500; color: rgb(var(--base1));
}

.hn-chat__chips {
    display: flex; flex-wrap: wrap; gap: .4rem;
    padding: .2rem 1.15rem .9rem;
    border-top: 1px solid #f0edea;
}
.hn-chat__chips-label {
    width: 100%; margin: .55rem 0 .15rem;
    font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
    color: #8b949d; font-weight: 600;
}
.hn-chat__chip {
    border: 1px solid #ddd9d4; background: #fff; color: #3c4854;
    border-radius: 999px; padding: .4rem .75rem;
    font-size: .8125rem; cursor: pointer; text-align: left;
}
.hn-chat__chip:hover { border-color: rgb(var(--base1)); color: rgb(var(--base1)); }

.hn-chat__form { border-top: 1px solid #e8e5e1; padding: .75rem; }
.hn-chat__row { display: flex; gap: .5rem; }
.hn-chat__row input {
    flex: 1 1 auto; min-width: 0;
    border: 1px solid #ddd9d4; border-radius: 999px;
    padding: .6rem .95rem; font-size: .9375rem; color: #2b3540;
}
.hn-chat__row input:focus { outline: none; border-color: rgb(var(--base1)); }
.hn-chat__row button {
    flex: 0 0 auto; width: 42px; border: 0; border-radius: 50%;
    background: rgb(var(--base1)); color: #fff; font-size: 1.05rem; cursor: pointer;
}

.hn-chat__handoff { display: grid; gap: .5rem; }
.hn-chat__handoff-lead { margin: 0 0 .1rem; font-size: .875rem; font-weight: 500; color: #2b3540; }
.hn-chat__handoff input[type="email"],
.hn-chat__handoff textarea {
    width: 100%; border: 1px solid #ddd9d4; border-radius: 8px;
    padding: .55rem .75rem; font-size: .875rem; font-family: inherit; color: #2b3540;
}
.hn-chat__handoff [aria-invalid="true"] { border-color: #d64545; }
.hn-chat__hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.hn-chat__send {
    border: 0; border-radius: 8px; background: rgb(var(--base1)); color: #fff;
    padding: .55rem .9rem; font-size: .875rem; font-weight: 500; cursor: pointer;
}
.hn-chat__send[disabled] { opacity: .6; cursor: default; }

@media (max-width: 480px) {
    .hn-chat { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
    .hn-chat__launch-text { display: none; }
    .hn-chat__launch { padding: .9rem; }
    .hn-chat__panel { max-height: calc(100vh - 80px); }
}
@media (prefers-reduced-motion: reduce) {
    .hn-chat__launch { transition: none; }
    .hn-chat__launch:hover { transform: none; }
}

/* --- Ask panel: conversation state -------------------------------------- */
/* Once a question has been asked the suggestion list collapses, handing its
   height to the log. Recalled from the toggle beside the input. */
.hn-chat.is-conversing .hn-chat__chips { display: none; }

.hn-chat__panel { min-height: 420px; }
.hn-chat__log { flex: 1 1 auto; }

.hn-chat__chips-toggle {
    flex: 0 0 auto; width: 42px; height: 42px;
    border: 1px solid #ddd9d4; border-radius: 50%;
    background: #fff; color: #6b7681; font-size: 1.05rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.hn-chat__chips-toggle:hover { border-color: rgb(var(--base1)); color: rgb(var(--base1)); }
.hn-chat:not(.is-conversing) .hn-chat__chips-toggle {
    background: rgb(var(--base1) / .1); border-color: rgb(var(--base1)); color: rgb(var(--base1));
}

/* --- Handoff form ------------------------------------------------------- */
/* It is a div inside a .hn-chat__msg--them wrapper, whose bubble styling only
   applied to <p>, so it rendered unpadded and cramped. Give it its own card. */
.hn-chat__msg--them .hn-chat__handoff {
    background: #f1f0ee;
    border-radius: 4px 14px 14px 14px;
    padding: .9rem 1rem;
    display: grid; gap: .6rem;
}
.hn-chat__handoff-lead { margin: 0; font-size: .875rem; font-weight: 600; color: #2b3540; }
.hn-chat__handoff input[type="email"],
.hn-chat__handoff textarea {
    width: 100%; box-sizing: border-box;
    border: 1px solid #d8d3cd; border-radius: 8px;
    padding: .6rem .75rem;
    font-size: .875rem; font-family: inherit; line-height: 1.5; color: #2b3540;
    background: #fff;
}
.hn-chat__handoff textarea { min-height: 84px; resize: vertical; }
.hn-chat__handoff input[type="email"]:focus,
.hn-chat__handoff textarea:focus {
    outline: none; border-color: rgb(var(--base1));
    box-shadow: 0 0 0 3px rgb(var(--base1) / .16);
}
.hn-chat__send { justify-self: start; padding: .55rem 1.1rem; }

/* Inline entry point in the hero. The floating bubble stays bottom-right where
   people expect it; this catches the visitor who wants an answer immediately. */
.hero-ask {
    display: inline-flex; align-items: center; gap: .5rem;
    background: none; border: 0; padding: .5rem .25rem;
    color: rgba(255, 255, 255, .82);
    font-family: var(--body-font); font-size: .9375rem;
    cursor: pointer; text-decoration: underline;
    text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .35);
}
.hero-ask:hover { color: #fff; text-decoration-color: rgb(var(--base1)); }
.hero-ask i { font-size: 1.15rem; color: rgb(var(--base1)); }

/* The template ships .badge unstyled, so eyebrow pills rendered as bare
   inline text with no background and no space beneath them. */
.badge.bg--base1 {
    display: inline-block;
    padding: .4rem .85rem;
    border-radius: 999px;
    background: rgb(var(--base1));
    color: #fff;
    font-size: .6875rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    line-height: 1;
}

/* Related-page block (driven by post meta, not by links in the content). */
.hn-related { background: hsl(var(--light)); }
.hn-related__label {
    font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
    color: rgb(var(--base1)); font-weight: 600;
}