@import url('tokens.css');

html, body {
    background: var(--hp-navy-deep);
    color: var(--hp-cream);
    font-family: var(--hp-font-body);
    margin: 0;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Sticky Elementor header is ~90px desktop / ~110px mobile. Push anchor
 * scroll targets down so the section heading isn't hidden by the header. */
html { scroll-padding-top: 110px; scroll-behavior: smooth; }
@media (max-width: 767px) {
    html { scroll-padding-top: 130px; }
}

h1, h2, h3 { font-family: var(--hp-font-display); font-weight: 400; }

.hp-container { max-width: var(--hp-maxw); margin: 0 auto; padding: 0 36px; }

.hp-btn-primary {
    background: var(--hp-gold);
    color: var(--hp-navy-darker);
    padding: 14px 24px;
    font-family: var(--hp-font-body);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: bold;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.hp-btn-primary:hover { background: var(--hp-gold-light); }

.hp-btn-secondary {
    color: var(--hp-cream);
    padding: 14px 0;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

/* === Sticky nav === */
.hp-nav {
    padding: 18px 36px;
    border-bottom: 1px solid rgba(244,241,234,0.1);
    position: sticky;
    top: 0;
    background: var(--hp-navy-deep);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hp-logo { display: flex; align-items: center; gap: 12px; color: var(--hp-cream); }
.hp-logo .wp-block-site-title a { color: var(--hp-cream); text-decoration: none; font-family: var(--hp-font-body); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
.hp-menu a { color: var(--hp-cream); text-decoration: none; font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; margin-right: 22px; }
.hp-menu .current-menu-item a { color: var(--hp-gold); }

/* === Language switcher === */
.hp-lang { position: relative; }
.hp-lang-toggle {
    background: transparent;
    color: var(--hp-cream);
    border: 1px solid rgba(244,241,234,0.3);
    padding: 6px 10px;
    font-family: var(--hp-font-body);
    font-size: 11px;
    letter-spacing: 2px;
    cursor: pointer;
}
/* Native <details>/<summary> handles open/closed state via [open] attribute.
 * Visibility is controlled by the browser's UA stylesheet — no explicit
 * display:none/block from us, or we fight the native toggle (see 2026-05-18 fix). */
.hp-lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--hp-navy-darker);
    border: 1px solid rgba(244,241,234,0.15);
    list-style: none;
    padding: 6px 0;
    margin: 0;
    min-width: 130px;
    z-index: 51;
}
.hp-lang-menu li { list-style: none; }
/* hide the default ▸ marker on <summary> */
.hp-lang-toggle { list-style: none; }
.hp-lang-toggle::-webkit-details-marker { display: none; }
.hp-lang-toggle::marker { content: ''; }
.hp-lang-menu a {
    display: block;
    padding: 6px 14px;
    color: var(--hp-cream);
    font-size: 11px;
    letter-spacing: 2px;
    text-decoration: none;
}
.hp-lang-menu a:hover { background: var(--hp-navy); color: var(--hp-gold); }

/* === Footer === */
.hp-footer {
    background: var(--hp-ink);
    color: var(--hp-cream);
    padding: 32px 36px;
    font-size: 11px;
    letter-spacing: 1.5px;
    font-family: var(--hp-font-body);
}
.hp-footer p { margin: 0; }
.hp-footer-links a { color: var(--hp-cream); opacity: 0.7; margin: 0 4px; text-decoration: none; }
.hp-footer-links a:hover { color: var(--hp-gold); opacity: 1; }

@media (max-width: 767px) {
    .hp-container { padding: 0 20px; }
    .hp-nav { padding: 14px 20px; flex-wrap: wrap; gap: 12px; }
    .hp-footer { padding: 24px 20px; }

    /* Touch targets — Apple HIG minimum 44px on tappable elements */
    .hp-menu a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 6px;
        margin-right: 8px;
        font-size: 13px;
    }
    /* lang switcher: stays compact even on mobile — "PT" is only 2 chars,
     * a 44×44 hit zone would dwarf the content. The inline style in
     * lang-switcher.php sets padding 5px 9px / font 11px to match. */
    .hp-lang-toggle {
        padding: 5px 9px;
        font-size: 11px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        line-height: 1;
    }
    .hp-footer-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 8px;
        margin: 0;
    }

    /* === Mobile header: single row (logo + hamburger + lang) ===
     * Inline nav links collapse into a hamburger button that opens a
     * full-screen overlay panel (built by mobile-nav.js). The middle col-50
     * (which holds the desktop menu) is hidden entirely on mobile. */
    .elementor-location-header .elementor-section { padding: 4px 0 !important; }
    .elementor-location-header .elementor-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 0 14px !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .elementor-location-header .elementor-col-25 {
        width: auto !important;
        flex: 0 1 auto !important;
    }
    .elementor-location-header .elementor-col-25:first-child { flex: 1 1 auto !important; }
    /* Hide the inline desktop nav column; its links live in the JS-built panel. */
    .elementor-location-header .elementor-col-50 { display: none !important; }
    .elementor-location-header .elementor-element-populated { padding: 0 !important; }
    .elementor-location-header img[src*="hidden-porto-logo"] {
        height: 64px !important;
        width: auto !important;
    }
    .elementor-location-header .elementor-col-25:first-child .elementor-widget-container > div,
    .elementor-location-header .elementor-col-25:first-child .elementor-widget-html > div {
        text-align: left !important;
        line-height: 0 !important; /* kill inline-block baseline gap under the mobile logo */
    }
    .elementor-location-header .elementor-col-25:first-child img {
        margin-left: 0 !important;
    }
    /* Floor the inline min-height:90px (nav + lang) so the logo sets the bar
     * height on mobile too (broad selector, any tag/depth — the old `> div`
     * path missed it, leaving the bar at ~102px). */
    .elementor-location-header [style*="min-height:90px"] {
        min-height: 40px !important;
    }
    .elementor-location-header .hp-lang-toggle {
        font-size: 11px !important;
        padding: 4px 8px !important;
        min-height: 0 !important;
        min-width: 0 !important;
    }

    /* === Chapter cards widen on mobile (Elementor inline-styled <article>s) ===
     * The 3 chapter cards are pasted as inline-styled <article> elements
     * inside Elementor columns — no hp-chapter class, so chapters.css
     * doesn't reach them. The Elementor column has 20px padding which
     * leaves cards 20px from each edge (335px wide on 375px viewport).
     * Pull the right side out by 19px so the right edge aligns with the
     * hero book mock above (which ends ~1px from viewport edge). */
    article[style*="background:#fff"][style*="padding:28px"] {
        margin-right: -19px !important;
    }
}

/* === Hero meta strip removed; language list moved below the BUY button ===
 * Per request: delete the "72 PÁGINAS / PT-ES-EN-FR-DE / PDF" strip from
 * the hero and surface only the language list below the BUY NOW button on
 * the final CTA section. Static text matches the original behaviour
 * (the original was a plain <span>, not links). Elementor data-ids differ
 * per language, so each rule lists all 5. */
.elementor-element-20acad9,
.elementor-element-0cc812b,
.elementor-element-1d82abb,
.elementor-element-079a9a1,
.elementor-element-9a1bf07 {
    display: none !important;
}

/* === Categorias eyebrow "O QUE VAIS PODER CONHECER" removed ===
 * The eyebrow above the "Diferentes categorias..." heading is redundant on
 * a section whose role is self-evident from the heading itself. Hiding it
 * also raises the heading slightly within the section. One ID per language
 * (PT/ES/EN/FR/DE). */
.elementor-element-2914a79,
.elementor-element-c1e40ea,
.elementor-element-f525955,
.elementor-element-7068135,
.elementor-element-d5d4d5c {
    display: none !important;
}

/* Language availability label under both buy buttons. Two lines:
 *   line 1: localized "Available in:" label
 *   line 2: "PT / ES / EN / FR / DE" (same in every language)
 * Implemented via \A newline + white-space: pre-line so a single ::after
 * carries both lines. Localized per language because CSS content: strings
 * can't be translated via Polylang. Hero button IDs: 5da6bc8/c72fbc0/
 * 4a5bc0d/f96e5db/1777a55. Final CTA button IDs: f0c1a09/ab0be8d/e702366/
 * a8276b8/af7d73b. */
.elementor-element-5da6bc8::after,
.elementor-element-f0c1a09::after { content: "Disponível em:\A PT  /  ES  /  EN  /  FR  /  DE"; }
.elementor-element-c72fbc0::after,
.elementor-element-ab0be8d::after { content: "Disponible en:\A PT  /  ES  /  EN  /  FR  /  DE"; }
.elementor-element-4a5bc0d::after,
.elementor-element-e702366::after { content: "Available in:\A PT  /  ES  /  EN  /  FR  /  DE"; }
.elementor-element-f96e5db::after,
.elementor-element-a8276b8::after { content: "Disponible en:\A PT  /  ES  /  EN  /  FR  /  DE"; }
.elementor-element-1777a55::after,
.elementor-element-af7d73b::after { content: "Verfügbar in:\A PT  /  ES  /  EN  /  FR  /  DE"; }

.elementor-element-5da6bc8::after,
.elementor-element-c72fbc0::after,
.elementor-element-4a5bc0d::after,
.elementor-element-f96e5db::after,
.elementor-element-1777a55::after,
.elementor-element-f0c1a09::after,
.elementor-element-ab0be8d::after,
.elementor-element-e702366::after,
.elementor-element-a8276b8::after,
.elementor-element-af7d73b::after {
    display: block;
    margin-top: 22px;
    /* No text-align here — inherit from widget. Final CTA widgets have
     * elementor-align-center (text-align: center), hero widgets default to
     * text-align: start (left). Inheriting keeps the strip visually under
     * whichever way the button is laid out. */
    white-space: pre-line;
    font-size: 11px;
    letter-spacing: 1px;
    line-height: 1.8;
    color: var(--hp-cream);
    opacity: 0.55;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Hide the book mock-up overlaying the hero cityscape. The mock is an
 * absolute-positioned div inside the same HTML widget that renders the
 * Porto rooftops background — so we can't hide the whole widget. Target
 * the inner wrapper by its unique inline-style fingerprint (bottom:-40px
 * + width:220px), which is stable across all 5 language variants. */
.elementor-widget-html div[style*="bottom:-40px"][style*="width:220px"] {
    display: none !important;
}

/* Final CTA buy button enlarged (~25% bigger than hero button) since it's
 * the actual purchase trigger and benefits from extra visual weight.
 * !important required because Elementor generates inline-targeted rules
 * with .elementor-15 ancestor specificity [0,4,0] that beats class-only
 * selectors otherwise. */
.elementor-element-f0c1a09 a.elementor-button,
.elementor-element-ab0be8d a.elementor-button,
.elementor-element-e702366 a.elementor-button,
.elementor-element-a8276b8 a.elementor-button,
.elementor-element-af7d73b a.elementor-button {
    padding: 18px 36px !important;
    font-size: 15px !important;
}

/* Checkout success page */
.hp-success-wrap { background: var(--hp-navy-deep); color: var(--hp-cream); padding: 100px 0 120px; min-height: 60vh; }
.hp-success-page { text-align: center; max-width: 560px; margin: 0 auto; }
.hp-success-page h1 { font-family: var(--hp-font-display); font-size: 36px; line-height: 1.15; margin-bottom: 16px; }
.hp-success-page p { font-size: 14px; opacity: 0.85; margin-bottom: 28px; }

/* === Blog === */
.hp-blog-archive,
.hp-single { background: var(--hp-cream); color: var(--hp-ink); padding: 60px 0 80px; min-height: 60vh; }
.hp-blog-title { font-family: var(--hp-font-display); font-size: 48px; margin: 0 0 36px; font-weight: 400; }
.hp-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hp-post-card { background: white; border: 1px solid rgba(46,68,89,0.15); overflow: hidden; display: flex; flex-direction: column; }
.hp-post-thumb img { width: 100%; height: 200px; object-fit: cover; display: block; }
.hp-post-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.hp-post-date { font-family: var(--hp-font-body); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--hp-navy); opacity: 0.7; margin-bottom: 10px; display: block; }
.hp-post-card-title { font-family: var(--hp-font-display); font-size: 22px; line-height: 1.2; margin: 0 0 12px; font-weight: 400; }
.hp-post-card-title a { color: var(--hp-ink); text-decoration: none; }
.hp-post-card-title a:hover { color: var(--hp-navy); }
.hp-post-card-excerpt { font-size: 13px; line-height: 1.6; color: #555; margin-bottom: 16px; flex: 1; }
.hp-post-card-excerpt p { margin: 0; }
.hp-post-card-link { font-family: var(--hp-font-body); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--hp-navy); text-decoration: none; }
.hp-post-card-link:hover { color: var(--hp-gold); }
.hp-pagination { margin-top: 48px; }
.hp-pagination .page-numbers { display: inline-block; padding: 8px 12px; margin: 0 4px; border: 1px solid var(--hp-navy); color: var(--hp-navy); font-family: var(--hp-font-body); text-decoration: none; }
.hp-pagination .page-numbers.current { background: var(--hp-navy); color: var(--hp-cream); }
.hp-no-posts { font-family: var(--hp-font-body); font-size: 14px; color: #555; }

.hp-single-inner { max-width: 720px; }
.hp-single-title { font-family: var(--hp-font-display); font-size: 42px; line-height: 1.15; margin: 8px 0 32px; font-weight: 400; }
.hp-single-thumb { margin: 0 -36px 36px; }
.hp-single-thumb img { width: 100%; height: auto; display: block; }
.hp-single-content { font-size: 16px; line-height: 1.75; color: #333; }
.hp-single-content h2 { font-family: var(--hp-font-display); font-size: 30px; margin: 36px 0 16px; }
.hp-single-content h3 { font-family: var(--hp-font-display); font-size: 22px; margin: 28px 0 12px; }
.hp-single-content p { margin-bottom: 18px; }
.hp-single-content a { color: var(--hp-navy); }
.hp-single-content blockquote { border-left: 3px solid var(--hp-gold); margin: 24px 0; padding-left: 18px; font-style: italic; color: #555; }
.hp-single-cats { margin-top: 40px; font-family: var(--hp-font-body); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--hp-navy); }
.hp-single-cats a { color: var(--hp-navy); text-decoration: underline; }

@media (max-width: 767px) {
    .hp-post-grid { grid-template-columns: 1fr; }
    .hp-blog-title { font-size: 32px; }
    .hp-single-title { font-size: 28px; }
    .hp-single-thumb { margin: 0 0 24px; }
}

/* === Mobile hamburger button + overlay panel ===
 * Hamburger is injected next to the lang switcher by mobile-nav.js. The
 * overlay panel is a body-level <nav> built from the desktop nav links. */
.hp-hamburger { display: none; }

@media (max-width: 767px) {
    .hp-hamburger {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 40px; height: 40px;
        padding: 0;
        background: transparent;
        border: 0;
        cursor: pointer;
        margin-right: 8px;
    }
    .hp-hamburger span {
        display: block;
        width: 24px; height: 2px;
        background: var(--hp-cream);
        transition: transform 0.18s ease, opacity 0.18s ease;
        transform-origin: center;
    }
    .hp-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hp-hamburger.is-open span:nth-child(2) { opacity: 0; }
    .hp-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

.hp-mobile-nav-panel {
    display: none;
    position: fixed;
    top: 80px;       /* leaves the header strip + its X button visible above */
    left: 0; right: 0; bottom: 0;
    background: var(--hp-navy-darker);
    z-index: 9000;
    padding: 24px 28px 32px;
    overflow-y: auto;
}
.hp-mobile-nav-panel.is-open { display: block; }
.hp-mobile-nav-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hp-mobile-nav-panel li { margin: 0; }
.hp-mobile-nav-panel a {
    display: block;
    padding: 18px 8px;
    color: var(--hp-cream);
    font-family: var(--hp-font-body);
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(244,241,234,0.12);
}
.hp-mobile-nav-panel a:hover,
.hp-mobile-nav-panel a:active { color: var(--hp-gold); }
@media (min-width: 768px) {
    .hp-mobile-nav-panel { display: none !important; }
}

/* === Wider content container on 1080p+ ===
 * Elementor defaults to 1140px content width. On a 1920px viewport that wastes
 * ~390px on each side. Bump to 1320px so the site uses more of the available
 * width without breaking typography legibility. Covers both legacy sections
 * (.elementor-section.elementor-section-boxed) and new Flexbox containers
 * (.e-con.e-con-boxed). Mobile/tablet unaffected. */
@media (min-width: 1141px) {
    .elementor-section.elementor-section-boxed > .elementor-container,
    .e-con.e-con-boxed,
    .e-con-inner {
        max-width: 1320px;
    }
}

/* === COMPACT HEADER (cliente 2026-06-05) — tablet + desktop (>=768px) ===
 * Shrink the bar as much as possible while keeping the logo large. The logo
 * height alone sets the bar; every other contributor (section padding,
 * widget-wrap padding, nav/lang inline min-height, inline-block baseline gap)
 * is floored so the logo fills ~85% of the strip. Result: ~128px -> ~84px.
 * Applies from 768px up so the tablet range gets the compact bar too; below
 * that (<=767px, Elementor's own mobile breakpoint where columns stack) the
 * hamburger block takes over. The 1320px container bump stays desktop-only
 * (>=1141px). Tune the logo height to taste. */
@media (min-width: 768px) {
    /* Logo flush-left + kill the inline-block baseline gap (~8px) under it. */
    .elementor-location-header .elementor-col-25:first-child .elementor-widget-html > div {
        text-align: left !important;
        line-height: 0 !important;
    }
    .elementor-location-header .elementor-col-25:first-child .elementor-widget-html img {
        margin-left: 0 !important;
        margin-right: 0 !important;
        height: 72px !important;
    }
    /* Vertically center logo / menu / lang against the shorter bar. */
    .elementor-location-header .elementor-container {
        align-items: center !important;
    }
    /* Floor the section vertical padding (was 4px). */
    .elementor-location-header .elementor-top-section,
    .elementor-location-header > section {
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }
    /* The menu (<nav>) and lang switcher (<div>) carry an inline min-height:90px
     * that would force the bar taller than the logo. Match by inline-style
     * substring (any tag, any depth) since the old `> div` path missed the
     * <nav>. Floor it below the logo height. */
    .elementor-location-header [style*="min-height:90px"] {
        min-height: 40px !important;
    }
    /* Floor widget-wrap padding (was 10px) so the logo column sets the height. */
    .elementor-location-header .elementor-widget-wrap {
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }
}

/* === Tablet menu: keep the nav on ONE line (768-1140px) ===
 * The nav <ul> is inline-styled gap:38px; flex-wrap:wrap. Its one-line width
 * is ~479px, but the centre column shrinks below that on tablet (530px@1140 ->
 * 344px@768), so the menu wraps to 2-3 lines (89px tall) and that, not the
 * logo, sets the bar height. Shrinking the gap + font lets all 5 links sit on
 * one line down to 768px, so the compact bar above can actually reach ~84px.
 * Below 768px Elementor stacks the columns, so the <=767px hamburger takes
 * over instead. Desktop (>=1141px) keeps the roomy 38px gap / 14px font. */
@media (min-width: 768px) and (max-width: 1140px) {
    .elementor-location-header nav ul {
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }
    .elementor-location-header nav ul li,
    .elementor-location-header nav ul a {
        font-size: 12px !important;
        white-space: nowrap !important;
    }
}

/* === Header + footer share the darker navy ===
 * Header and hero used to share the same navy. Bumping the header one step
 * darker (--hp-navy-darker #16263A vs hero --hp-navy-deep #1F3144) creates
 * a thin visible edge between them. Footer matches the header so the dark
 * navy bookends the page top and bottom. */
.elementor-location-header > section,
.elementor-location-header .elementor-top-section,
.elementor-location-footer > section,
.elementor-location-footer .elementor-top-section {
    background-color: var(--hp-navy-darker) !important;
}

/* === Footer organizado no mobile (cliente 2026-06-05) ===
 * Desktop fica como está (copyright à esquerda / links à direita, 1 linha).
 * No mobile as 2 colunas (col-40 copyright + col-60 links) empilham e ficam
 * desalinhadas (uma à esquerda, outra à direita, ambas a quebrar). Como o
 * texto todo não cabe numa linha em mobile, centramos e organizamos: tudo
 * centrado, copyright em cima, links centrados por baixo. */
@media (max-width: 767px) {
    /* Broad: o <p> dos links tem text-align:right explícito do Elementor que
     * não está sob .elementor-widget-container, por isso centramos p/a
     * diretamente (o !important bate o inline/setting do Elementor). */
    .elementor-location-footer .elementor-column,
    .elementor-location-footer .elementor-widget,
    .elementor-location-footer .elementor-widget-container,
    .elementor-location-footer p,
    .elementor-location-footer a,
    .elementor-location-footer li {
        text-align: center !important;
    }
    /* respiro entre copyright e links quando empilham */
    .elementor-location-footer .elementor-column { padding-bottom: 6px !important; }
}