/* Interviewplus site styles: design tokens, header, footer and shared .hp page components.
   Linked from templates/layout.blade.php. */

/* Design tokens */
:root{
    --hp-ink: #0b1220;
    --hp-text: #475467;
    --hp-muted: #667085;
    --hp-line: #e7eaf0;
    --hp-surface: #ffffff;
    --hp-soft: #f6f8fb;
    --hp-accent: #2f54eb;
    --hp-accent-ink: #1d39c4;
    --hp-accent-soft: #eef2ff;
    --hp-good: #12b76a;
    --hp-radius: 16px;
    --hp-bg: #ffffff;
}
[data-bs-theme=dark]{
    --hp-ink: #f2f4f7;
    --hp-text: #c0c6d1;
    --hp-muted: #98a2b3;
    --hp-line: #2a3140;
    --hp-surface: #161b26;
    --hp-soft: #0f131b;
    --hp-accent: #6b8cff;
    --hp-accent-ink: #9db1ff;
    --hp-accent-soft: #1c2440;
    --hp-bg: #0b0e15;
    /* The old theme paints <main>, modals and dropdowns with --bs-body-bg; align it with the site background */
    --bs-body-bg: var(--hp-bg);
}
body{ background-color: var(--hp-bg); }
.site-header, .site-footer{
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.site-header :is(a, span, p, li, .nav-link, .btn, small, b, .h6),
.site-footer :is(a, span, p, li, small, h5){
    font-family: inherit;
}

/* Header */
.site-header{
    position: sticky; top: 0; z-index: 1020;
    background: color-mix(in srgb, var(--hp-surface) 85%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--hp-line);
}
.site-header .navbar{ min-height: 68px; padding: 10px 0; }
.site-brand{ display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.site-brand img{ width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 0 0 1px rgba(16,24,40,.06), 0 4px 10px -4px rgba(16,24,40,.3); }
.site-brand span{ font-size: 19px !important; font-weight: 700; letter-spacing: -0.02em; color: var(--hp-ink); }
.site-brand small{ font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--hp-accent); background: var(--hp-accent-soft); padding: 2px 8px; border-radius: 99px; }
.site-header .navbar-nav{ gap: 4px; }
.site-header .navbar-nav .nav-link{
    font-size: 15px; font-weight: 500; color: var(--hp-text);
    padding: 8px 14px !important; border-radius: 8px; transition: color .15s ease, background-color .15s ease;
}
.site-header .navbar-nav .nav-link:hover{ color: var(--hp-ink); background: var(--hp-soft); }
.site-header .navbar-nav .nav-link.active{ color: var(--hp-ink); font-weight: 600; }
.site-actions{ display: flex; align-items: center; gap: 10px; margin-left: auto; }
.site-signin{ font-size: 15px !important; font-weight: 500; color: var(--hp-ink); padding: 8px 12px; border-radius: 8px; }
.site-signin:hover{ color: var(--hp-accent); }
.site-cta{
    align-items: center; font-size: 14px !important; font-weight: 600; color: #fff !important;
    background: var(--hp-accent); padding: 9px 16px; border-radius: 10px;
    box-shadow: 0 6px 16px -8px rgba(47,84,235,.7); transition: background-color .15s ease;
}
.site-cta:hover{ background: var(--hp-accent-ink); }
.site-icon-btn, .site-avatar, .site-header .navbar-toggler{
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; padding: 0;
    border: 1px solid var(--hp-line); background: var(--hp-surface); color: var(--hp-ink); font-size: 18px;
}
.site-icon-btn:hover{ border-color: var(--hp-accent); color: var(--hp-accent); }
.site-avatar{ position: relative; overflow: hidden; flex-shrink: 0; background: var(--hp-accent-soft); }
.site-avatar span{ font-size: 15px !important; font-weight: 600; color: var(--hp-accent); }
.site-avatar img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site-header .navbar-toggler{ border-radius: 10px; font-size: 22px; box-shadow: none; }
.site-header .dropdown-menu{
    border: 1px solid var(--hp-line); border-radius: 14px; margin-top: 12px !important;
    padding: 8px !important; min-width: 280px; background: var(--hp-surface);
    box-shadow: 0 24px 48px -16px rgba(16,24,40,.25) !important;
}
.site-header .dropdown-menu > li.px-3{ padding: 8px 8px 4px !important; margin-bottom: 4px !important; }
.site-header .dropdown-menu .h6{ font-size: 15px; font-weight: 600; color: var(--hp-ink); }
.site-header .dropdown-menu p.small{ font-size: 13px; color: var(--hp-muted); }
.site-header .dropdown-item{
    font-size: 14px !important; font-weight: 500; color: var(--hp-text); padding: 9px 10px; border-radius: 8px;
}
.site-header .dropdown-item:hover{ background: var(--hp-soft); color: var(--hp-ink); }
.site-header .dropdown-item i{ color: var(--hp-muted); }
.site-header .dropdown-menu hr{ margin: 6px 0; border-color: var(--hp-line); opacity: 1; }
.site-menu-intro{ padding: 10px 10px 6px; }
.site-menu-intro b{ display: block; font-size: 15px; color: var(--hp-ink); }
.site-menu-intro p{ font-size: 13px !important; line-height: 1.5; color: var(--hp-muted); margin: 4px 0 12px; }
.site-menu-intro .site-cta{ display: flex; justify-content: center; }
.site-header .dark-mode-switch{ background: var(--hp-soft) !important; border-radius: 10px !important; margin-top: 0 !important; min-width: 0 !important; }
.site-header .dark-mode-switch .btn{ flex: 1; font-size: 13px !important; font-weight: 500; color: var(--hp-text); border-radius: 8px; padding: 7px 6px; }
.site-header .dark-mode-switch .btn.active{ background: var(--hp-surface); color: var(--hp-ink); box-shadow: 0 1px 3px rgba(16,24,40,.12); }
@media (min-width: 992px){
    .site-header .navbar-toggler{ display: none; }
}
@media (max-width: 991px){
    .site-header .navbar-collapse{ width: 100%; }
    .site-header .navbar-nav{ padding: 12px 0 8px; }
}

/* Footer */
.site-footer{ background: var(--hp-soft); border-top: 1px solid var(--hp-line); padding: 72px 0 0; color: var(--hp-text); }
.site-footer-tagline{ font-size: 15px !important; line-height: 1.6; color: var(--hp-text); margin: 16px 0 20px; max-width: 320px; }
.site-social{ display: flex; gap: 10px; }
.site-social a{
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 16px !important;
    color: var(--hp-text); background: var(--hp-surface); border: 1px solid var(--hp-line); transition: color .15s ease, border-color .15s ease;
}
.site-social a:hover{ color: var(--hp-accent); border-color: var(--hp-accent); }
.site-footer h5{ font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--hp-ink); margin-bottom: 16px; }
.site-footer ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer ul a, .site-footer-legal a{ font-size: 15px !important; color: var(--hp-text); transition: color .15s ease; }
.site-footer ul a:hover, .site-footer-legal a:hover{ color: var(--hp-accent); }
.site-footer-bottom{
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
    margin-top: 40px; padding: 24px 0; border-top: 1px solid var(--hp-line); font-size: 14px; color: var(--hp-muted);
}
.site-footer-legal{ display: flex; gap: 24px; }
.site-footer-legal a{ font-size: 14px !important; }
@media (max-width: 767px){
    .site-footer{ padding-top: 48px; }
    .site-footer-bottom{ flex-direction: column; align-items: flex-start; margin-top: 28px; }
}

/* Shared page components (.hp wrapper) */
.hp{
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--hp-text);
    -webkit-font-smoothing: antialiased;
}
/* layout.blade.php forces Helvetica 17px on p/span/a/.btn, so reset inside the home page */
.hp p, .hp span, .hp a, .hp li, .hp .btn, .hp .badge, .hp input, .hp .fw-light, .hp td, .hp th, .hp summary, .hp button{
    font-family: inherit;
    font-size: inherit;
}
.hp h1, .hp h2{ text-wrap: balance; }
.hp p{ text-wrap: pretty; }
.hp h1, .hp h2, .hp h3, .hp h4, .hp h5, .hp h6{
    font-family: inherit;
    color: var(--hp-ink);
    letter-spacing: -0.02em;
}
.hp a{ text-decoration: none; }
.hp section{ padding: 88px 0; }
.hp .hp-eyebrow{
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--hp-accent);
}
.hp .hp-title{ font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; line-height: 1.15; margin: 12px 0 14px; }
.hp .hp-lead{ font-size: 18px; line-height: 1.65; color: var(--hp-text); }
.hp .hp-btn{
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 16px; font-weight: 600; padding: 14px 24px; border-radius: 12px; border: 0;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.hp .hp-btn-primary{ background: var(--hp-accent); color: #fff; box-shadow: 0 8px 20px -8px rgba(47,84,235,.6); }
.hp .hp-btn i{ color: inherit !important; }
.hp .hp-btn-primary:hover{ background: var(--hp-accent-ink); color: #fff; transform: translateY(-1px); }
.hp .hp-btn-ghost{ background: var(--hp-surface); color: var(--hp-ink); border: 1px solid var(--hp-line); }
.hp .hp-btn-ghost:hover{ border-color: var(--hp-accent); color: var(--hp-accent); }

/* Inner page header (pricing, interviews, about, ...) */
.hp .hp-page-hero{
    padding: 72px 0 52px; text-align: center;
    background: radial-gradient(800px 360px at 50% -20%, rgba(47,84,235,.12), transparent 65%), var(--hp-soft);
    border-bottom: 1px solid var(--hp-line);
}
.hp .hp-page-hero h1{ font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; margin: 12px 0 16px; }
.hp .hp-page-hero .hp-lead{ max-width: 640px; margin: 0 auto; }
@media (max-width: 767px){
    .hp .hp-page-hero{ padding: 48px 0 36px; }
}

/* Feature cards (home page, payment success) */
.hp .hp-feature{
    position: relative; height: 100%; padding: 28px; border-radius: var(--hp-radius);
    background: var(--hp-surface); border: 1px solid var(--hp-line); transition: border-color .2s ease;
}
.hp .hp-feature:hover{ border-color: var(--hp-accent); }
.hp .hp-feature-icon{ width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--hp-accent-soft); color: var(--hp-accent); margin-bottom: 20px; }
.hp .hp-feature h3{ font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.hp .hp-feature p{ font-size: 15px; line-height: 1.6; margin-bottom: 18px; color: var(--hp-text); }
.hp .hp-feature .hp-link{ font-size: 15px; font-weight: 600; color: var(--hp-accent); }
@media (max-width: 767px){
    .hp .hp-feature{ padding: 22px; }
}

/* Inline links in body copy use the brand accent */
.hp p a:not([class]), .hp .hp-lead a:not([class]){ color: var(--hp-accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--hp-accent) 35%, transparent); text-underline-offset: 3px; }
.hp p a:not([class]):hover, .hp .hp-lead a:not([class]):hover{ color: var(--hp-accent-ink); text-decoration-color: currentColor; }

/* Status pages (404, 410, payment success, information) */
.hp .hp-page-hero.hp-status{ padding: 104px 0 112px; }
.hp .hp-status h1{ max-width: 760px; margin-left: auto; margin-right: auto; }
.hp .hp-status h1.hp-status-msg{ max-width: 640px; font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.hp .hp-status-icon{ width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: var(--hp-accent-soft); color: var(--hp-accent); }
.hp .hp-status-icon.hp-status-good{ background: color-mix(in srgb, var(--hp-good) 14%, transparent); color: var(--hp-good); }
.hp .hp-status-search{ max-width: 520px; margin: 32px auto 0; text-align: left; }
.hp .hp-status-actions{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.hp .hp-next{ padding: 80px 0 96px; }
@media (max-width: 575px){
    .hp .hp-page-hero.hp-status{ padding: 64px 0 72px; }
    .hp .hp-next{ padding: 48px 0 56px; }
    .hp .hp-status-actions .hp-btn{ width: 100%; }
}

/* Legal documents (terms, privacy, disclaimer) */
.hp .hp-legal{ padding: 64px 0 96px; }
.hp .hp-legal-toc{ position: sticky; top: 100px; }
.hp .hp-legal-toc span{ display: block; font-size: 13px !important; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--hp-ink); margin-bottom: 14px; }
.hp .hp-legal-toc ol{ list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; border-left: 1px solid var(--hp-line); }
.hp .hp-legal-toc a{ display: block; font-size: 14px !important; color: var(--hp-muted); padding: 6px 0 6px 16px; margin-left: -1px; border-left: 2px solid transparent; }
.hp .hp-legal-toc a:hover{ color: var(--hp-ink); border-left-color: var(--hp-accent); }
.hp .hp-legal-body{ max-width: 780px; }
.hp .hp-legal-body section{ scroll-margin-top: 96px; padding: 0 0 32px; margin-bottom: 32px; border-bottom: 1px solid var(--hp-line); }
.hp .hp-legal-body h2{ font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.hp .hp-legal-body h2 span{ color: var(--hp-muted); font-weight: 600; margin-right: 10px; }
.hp .hp-legal-body p, .hp .hp-legal-body li{ font-size: 16px; line-height: 1.75; color: var(--hp-text); }
.hp .hp-legal-body p{ margin-bottom: 14px; }
.hp .hp-legal-body p:last-child{ margin-bottom: 0; }
.hp .hp-legal-body ul{ padding-left: 20px; margin: 0; display: grid; gap: 6px; }
.hp .hp-legal-related{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; font-size: 15px; }
.hp .hp-legal-related span{ font-size: 13px !important; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--hp-muted); }
.hp .hp-legal-related a{ font-weight: 600; color: var(--hp-accent); }
@media (max-width: 767px){
    .hp .hp-legal{ padding: 40px 0 64px; }
    .hp .hp-legal-body h2{ font-size: 18px; }
    .hp .hp-legal-body p, .hp .hp-legal-body li{ font-size: 15px; }
}

/* FAQ accordion (pricing, faq) built on <details> */
.hp .hp-faq details{ border-bottom: 1px solid var(--hp-line); }
.hp .hp-faq summary{
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 20px 0; font-size: 17px; font-weight: 600; color: var(--hp-ink);
}
.hp .hp-faq summary::-webkit-details-marker{ display: none; }
.hp .hp-faq summary i{ color: var(--hp-muted); transition: transform .2s ease; flex-shrink: 0; }
.hp .hp-faq details[open] summary i{ transform: rotate(45deg); }
.hp .hp-faq details p{ font-size: 16px; line-height: 1.65; margin: 0 0 20px; max-width: 720px; }

/* Blog */
.hp .hp-post{ display: flex; flex-direction: column; height: 100%; background: var(--hp-surface); border: 1px solid var(--hp-line); border-radius: var(--hp-radius); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.hp .hp-post:hover{ border-color: var(--hp-accent); box-shadow: 0 18px 36px -24px rgba(47,84,235,.45); transform: translateY(-2px); }
.hp .hp-post-img{ display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--hp-soft); }
.hp .hp-post-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.hp .hp-post:hover .hp-post-img img{ transform: scale(1.03); }
.hp .hp-post-body{ display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.hp .hp-post time{ font-size: 13px; color: var(--hp-muted); margin-bottom: 8px; }
.hp .hp-post h3{ font-size: 17px; font-weight: 700; line-height: 1.4; margin: 0 0 8px; }
.hp .hp-post h3 a{ color: var(--hp-ink); }
.hp .hp-post h3 a:hover{ color: var(--hp-accent); }
.hp .hp-post p{ font-size: 14px !important; line-height: 1.6; color: var(--hp-text); margin: 0 0 16px; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hp .hp-post-more{ font-size: 14px !important; font-weight: 600; color: var(--hp-accent); }
.hp .hp-post-featured{ display: grid; grid-template-columns: 1.15fr 1fr; }
.hp .hp-post-featured .hp-post-img{ aspect-ratio: auto; min-height: 100%; }
.hp .hp-post-featured .hp-post-body{ padding: 32px; justify-content: center; }
.hp .hp-post-featured h3{ font-size: 26px; line-height: 1.25; letter-spacing: -0.02em; }
.hp .hp-post-featured p{ font-size: 16px !important; -webkit-line-clamp: 4; flex: none; margin-bottom: 20px; }
.hp .hp-post-label{ font-size: 12px !important; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--hp-accent); margin-bottom: 10px; }
@media (max-width: 991px){
    .hp .hp-post-featured{ grid-template-columns: 1fr; }
    .hp .hp-post-featured .hp-post-img{ aspect-ratio: 16 / 9; }
    .hp .hp-post-featured .hp-post-body{ padding: 22px; justify-content: flex-start; }
    .hp .hp-post-featured .hp-post-img{ min-height: 0; }
    .hp .hp-post-featured h3{ font-size: 21px; }
}
.hp .hp-pager{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 48px; }
.hp .hp-pager a, .hp .hp-pager span{ min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 14px !important; font-weight: 500; color: var(--hp-text); border: 1px solid var(--hp-line); background: var(--hp-surface); }
.hp .hp-pager a:hover{ border-color: var(--hp-accent); color: var(--hp-accent); }
.hp .hp-pager .is-current{ background: var(--hp-accent); border-color: var(--hp-accent); color: #fff; font-weight: 600; }
.hp .hp-pager .is-disabled{ opacity: .45; }
.hp .hp-pager .is-gap{ border: 0; background: transparent; min-width: 20px; padding: 0; }

/* Catalog lists (questions catalog, job description interviews) */
.hp .cat-main{ padding: 48px 0 88px; }
.hp .cat-bar{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.hp .cat-search{ flex: 1; min-width: 260px; max-width: 520px; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; background: var(--hp-surface); border: 1px solid var(--hp-line); border-radius: 12px; }
.hp .cat-search:focus-within{ border-color: var(--hp-accent); box-shadow: 0 0 0 4px var(--hp-accent-soft); }
.hp .cat-search i{ color: var(--hp-muted); }
.hp .cat-search input{ flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--hp-ink); padding: 8px 0; }
.hp .cat-search button{ border: 0; padding: 8px 14px; font-size: 14px; }
.hp .cat-count{ font-size: 14px; color: var(--hp-muted); }
.hp .cat-count a{ color: var(--hp-accent); font-weight: 600; margin-left: 8px; }

.hp .cat-list{ list-style: none; padding: 0; margin: 0; border: 1px solid var(--hp-line); border-radius: 16px; background: var(--hp-surface); overflow: hidden; }
.hp .cat-list li + li{ border-top: 1px solid var(--hp-line); }
.hp .cat-list a{ display: flex; align-items: center; gap: 16px; padding: 16px 20px; color: inherit; transition: background-color .15s ease; }
.hp .cat-list a:hover{ background: var(--hp-soft); }
.hp .cat-list a:hover h2{ color: var(--hp-accent); }
.hp .cat-icon{ width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: var(--hp-accent-soft); color: var(--hp-accent); font-weight: 700; font-size: 16px; }
.hp .cat-body{ flex: 1; min-width: 0; }
.hp .cat-body h2{ font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0 0 4px; transition: color .15s ease; }
.hp .cat-meta{ display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--hp-muted); }
.hp .cat-meta span{ display: inline-flex; align-items: center; gap: 5px; }
.hp .cat-list .bi-arrow-right{ color: var(--hp-muted); flex-shrink: 0; }
.hp .cat-empty{ padding: 48px 20px; text-align: center; font-size: 15px; color: var(--hp-muted); }
@media (max-width: 767px){
    .hp .cat-main{ padding: 28px 0 56px; }
    .hp .cat-list a{ padding: 14px 16px; gap: 12px; }
    .hp .cat-icon{ display: none; }
    .hp .cat-search{ max-width: none; }
}
.hp .cat-desc{ font-size: 14px; line-height: 1.55; color: var(--hp-text); margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }