/*
Theme Name:   TransParadise (GeneratePress Child)
Description:  Child theme for TransParadise on top of GeneratePress. Minimal overrides for legibility.
Author:       Cristiano Zillmann
Template:     generatepress
Version:      0.3.0
*/

:root {
  --tp-primary: #C92A4A;
  --tp-primary-dark: #8E1B33;
  --tp-ink:     #1A1A1A;
  --tp-paper:   #F8F4EE;
  --tp-base:    #FFFFFF;
}

html, body {
    /* `overflow-x: clip` kills the horizontal scrollbar from .alignfull (100vw)
       WITHOUT breaking position: sticky on any descendant — `overflow: hidden`
       does break it. `clip` is supported by every modern browser. */
    overflow-x: clip;
    max-width: 100%;
}
body { color: var(--tp-ink); background: var(--tp-base); }
a { color: var(--tp-primary); }
a:hover { color: var(--tp-primary-dark); }

h1, h2, h3, h4 { color: var(--tp-ink); font-family: 'Fraunces', Georgia, serif; }

/* ===== Break the GeneratePress container for full-bleed blocks ===== */
.entry-content,
.inside-article,
.inside-page-header,
.site-content,
.content-area,
.site-main { overflow: visible !important; }

/* Allow .alignfull / .alignwide to escape the GP content max-width */
.entry-content > .alignfull,
.entry-content .wp-block-cover.alignfull {
    margin-left:  calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw !important;
    width: 100vw !important;
}
.entry-content > .alignwide {
    margin-left:  calc(50% - min(50vw, 600px)) !important;
    margin-right: calc(50% - min(50vw, 600px)) !important;
    max-width: 1200px !important;
    width: auto !important;
}

/* Remove the page title h1 above the hero on pages that already include a hero */
.page .entry-header { display: none !important; }

/* ===== Hero cover (page banner) ===== */
/* Full-bleed, fixed proportions, video background, dark text on top.
   Works wherever it's placed (inside entry-content, before main, etc.). */
.wp-block-cover.tp-hero {
    background-color: #FFFFFF !important;
    margin-left:  calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 380px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: auto !important;
}
/* Every page's hero is injected by `generate_after_header` OUTSIDE the page
   container, so it can be true full-bleed and flush with the sticky header. */
.tp-hero-outer {
    width: 100%;
    margin: 0;
    padding: 0;
}
.tp-hero-outer .wp-block-cover.tp-hero {
    margin-left:  0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* Hide the in-content duplicate of the hero (the cover block still lives in
   post_content so Freda can edit it in Gutenberg, but on the front-end the
   hook above renders the canonical, full-bleed copy). */
.entry-content > .wp-block-cover.tp-hero,
.entry-content > .wp-block-cover.tp-hero.alignfull { display: none !important; }

/* Push the content below the hero down a bit */
body.blog .site-content,
body.page .site-content { padding-top: 1.5rem; }

/* Background image: absolute, fills the hero, centred, slight bias to the top
   so portrait photos show the upper half (faces/heads) instead of cropping mid-body. */
.wp-block-cover.tp-hero > img.wp-block-cover__image-background,
.wp-block-cover.tp-hero .wp-block-cover__image-background {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    z-index: 0 !important;
}

/* Dim overlay stays above the image, below the text. Default fully clear; the
   dimRatio set on the block itself controls the actual darkness. */
.wp-block-cover.tp-hero > .wp-block-cover__background {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background-color: transparent !important;
}
.wp-block-cover.tp-hero > .wp-block-cover__background.has-background-dim-0 {
    background-color: transparent !important;
    opacity: 0 !important;
}

/* Background video — same rules as the bg image (cover, centered) */
.wp-block-cover.tp-hero > video.wp-block-cover__video-background {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    z-index: 0 !important;
}

/* Inner text container: centered both axes via flex, with max-width band */
.wp-block-cover.tp-hero .wp-block-cover__inner-container {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 3rem 1.25rem !important;
    text-align: center !important;
    align-self: center !important;
}

/* Hero text: black on the (light) video. Consistent sizes across all pages. */
.wp-block-cover.tp-hero h1,
.wp-block-cover.tp-hero h2,
.wp-block-cover.tp-hero .tp-hero-title,
.wp-block-cover.tp-hero .tp-hero-subtitle,
.wp-block-cover.tp-hero p {
    color: #1A1A1A !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-shadow: 0 1px 3px rgba(255,255,255,0.6);
}
.wp-block-cover.tp-hero .tp-hero-title {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
}
.wp-block-cover.tp-hero .tp-hero-subtitle {
    font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
    line-height: 1.45 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    max-width: 640px;
}
.wp-block-cover.tp-hero .has-base-color { color: #1A1A1A !important; }
@media (max-width: 768px) {
    .wp-block-cover.tp-hero { min-height: 300px !important; }
    .wp-block-cover.tp-hero .wp-block-cover__inner-container { padding: 1.5rem 1rem !important; }
    .wp-block-cover.tp-hero .tp-hero-logo img { width: 220px !important; }
    .wp-block-cover.tp-hero .tp-hero-title { font-size: 2rem !important; }
    .wp-block-cover.tp-hero .tp-hero-subtitle { font-size: 0.95rem !important; }
}

/* Hide GP-rendered featured image at the top of single posts/pages
   (we use Gutenberg cover blocks as the page banner instead).
   IMPORTANT: only on single views — archives keep their thumbnails. */
.featured-image.page-header-image,
.featured-image.page-header-contents,
.single-post .post-image-above-header,
.single-page .post-image-above-header,
.single-post .inside-article > .post-image,
.single-page .inside-article > .post-image,
body.single .post-image-below-header,
body.page  .post-image-below-header { display: none !important; }

/* Style the archive thumbnails on the Notícias listing */
body.blog .post-image,
body.archive .post-image {
    margin-bottom: 1rem;
}
body.blog .post-image img,
body.archive .post-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 6px;
}

/* Hide GP post meta (date / author / comments) on single posts and listings */
.entry-meta,
.entry-meta-top,
.posted-on,
.entry-date,
.byline,
.cat-links,
.tags-links,
.comments-link,
.post-navigation .nav-previous,
.post-navigation .nav-next time { display: none !important; }

/* Pullquote */
.wp-block-pullquote { border-left: 4px solid var(--tp-primary); padding: 1.5em 2em; background: var(--tp-paper); }
.wp-block-pullquote blockquote p { font-size: 1.05em; line-height: 1.6; }
.wp-block-pullquote cite { color: #555; font-size: 0.9em; }
@media (max-width: 768px) {
    .wp-block-pullquote { padding: 0.9em 0.9em !important; border-left-width: 3px !important; }
    .wp-block-pullquote blockquote,
    .wp-block-pullquote blockquote p {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        text-align: left !important;
        margin: 0 0 0.7em !important;
    }
    .wp-block-pullquote cite,
    .wp-block-pullquote blockquote cite {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }
    /* The Encantravar section group: tighter spacing on phone */
    .wp-block-group.has-muted-background-color {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    /* The intro <em> paragraph above the pullquote (also Encantravar) */
    .wp-block-group.has-muted-background-color > .wp-block-paragraph em,
    .wp-block-group.has-muted-background-color > p em {
        font-size: 0.92rem !important;
        line-height: 1.5 !important;
    }
}
@media (max-width: 480px) {
    .wp-block-pullquote blockquote,
    .wp-block-pullquote blockquote p { font-size: 0.82rem !important; line-height: 1.48 !important; }
    .wp-block-pullquote cite,
    .wp-block-pullquote blockquote cite { font-size: 0.7rem !important; }
}

/* Images placed after the Manifesto block and inside the Encantravar block.
   Centred, at 70% of the content width, with rounded corners. */
.wp-block-image.tp-after-manifesto,
.wp-block-image.tp-encantravar-image {
    margin: 2rem auto !important;
    text-align: center;
    max-width: 70%;
    width: 70%;
}
.wp-block-image.tp-after-manifesto img,
.wp-block-image.tp-encantravar-image img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
}
@media (max-width: 768px) {
    .wp-block-image.tp-after-manifesto,
    .wp-block-image.tp-encantravar-image {
        max-width: 85%;
        width: 85%;
    }
}

/* "Quem Somos" — three columns of values (Interseccionalidade / Cultura /
   Inclusão). The PT word "Interseccionalidade" is long; shrink the headings
   so they don't wrap on desktop. */
.wp-block-columns .wp-block-column .wp-block-heading[class*="font-size-large"],
.wp-block-columns .wp-block-column h3 {
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em;
}
@media (max-width: 768px) {
    .wp-block-columns .wp-block-column h3 {
        font-size: 1.05rem !important;
    }
}

/* "Por onde começar" cards: image between heading and paragraph */
.tp-card-image {
    margin: 0.5rem 0 1rem !important;
}
.tp-card-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 6px;
}

/* Hero logo (replaces the H1 in the home cover) */
.tp-hero-logo,
.wp-block-cover.tp-hero .tp-hero-logo {
    margin: 0 auto !important;
    text-align: center;
}
.tp-hero-logo img {
    max-width: 320px;
    width: 60vw;
    height: auto;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}
@media (max-width: 768px) {
    .tp-hero-logo img { max-width: 220px; width: 70vw; }
}

/* Sticky header — stays on top while the visitor scrolls (desktop + mobile). */
.site-header {
    position: sticky !important;
    top: 0;
    z-index: 100;
    background: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease;
}
.main-navigation {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #FFFFFF !important;
}

/* Header without logo: nav spans the full header width. */
.site-header .inside-header,
.inside-header {
    justify-content: center;
    width: 100%;
    max-width: 100%;
}
/* GP's default .inside-header padding (40px) is fine on desktop but pushes
   the menu sideways on phones. Strip lateral padding only on small screens. */
@media (max-width: 768px) {
    .site-header .inside-header,
    .inside-header {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
.main-navigation {
    width: 100% !important;
    max-width: 100% !important;
}
.main-navigation .inside-navigation {
    max-width: 1240px;
    margin: 0 auto;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* DESKTOP (≥769px): items spread — Home on the left, PT/EN/ES on the right. */
@media (min-width: 769px) {
    .main-navigation .main-nav > ul {
        display: flex !important;
        align-items: center;
        width: 100%;
        gap: 0.25rem 0.5rem;
        justify-content: flex-start !important;
    }
    .main-navigation .main-nav > ul > li.tp-lang-switch:first-of-type {
        margin-left: auto;
    }
}

/* Footer: icon-driven contact column */
.footer-widgets .tp-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-widgets .tp-contact-list li {
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin-bottom: 0.85em;
    line-height: 1.4;
}
.footer-widgets .tp-contact-list svg {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    color: #FFE680;        /* warm yellow, picks up the footer logo */
    stroke: #FFE680;
}
.footer-widgets .tp-contact-list a {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
.footer-widgets .tp-contact-list a:hover { color: #FFE680 !important; }
.footer-widgets .tp-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 2.1;
}

/* Buttons */
.wp-block-button__link {
    background: var(--tp-primary) !important;
    color: #FFFFFF !important;
    border-radius: 999px;
    padding: 0.7em 1.6em;
    font-weight: 600;
    text-decoration: none;
}
.wp-block-button__link:hover { background: var(--tp-primary-dark) !important; }

/* Color-class overrides */
.has-muted-background-color { background-color: var(--tp-paper) !important; }
.has-contrast-background-color { background-color: var(--tp-ink) !important; color: #FFFFFF !important; }
.has-contrast-background-color a, .has-contrast-background-color p { color: #FFFFFF !important; }

/* Header / Navigation */
.main-navigation,
.main-navigation ul {
    background-color: var(--tp-base);
}
.main-navigation .main-nav ul li a {
    color: var(--tp-ink) !important;
    font-weight: 500;
}
.main-navigation .main-nav ul li:hover a,
.main-navigation .main-nav ul li.current-menu-item a {
    color: var(--tp-primary) !important;
}

/* Logo at the start of the menu — DESKTOP ONLY, hidden on phones. */
.main-navigation li.tp-menu-logo {
    display: none;                  /* default: hidden (mobile-first) */
}
@media (min-width: 769px) {
    .main-navigation li.tp-menu-logo {
        display: inline-flex !important;
        align-items: center;
        margin-right: 0.5em;
    }
    .main-navigation li.tp-menu-logo > a {
        padding: 0 !important;
        background: transparent !important;
        display: inline-flex;
        align-items: center;
        line-height: 1;
    }
    .main-navigation li.tp-menu-logo > a:hover,
    .main-navigation li.tp-menu-logo > a:focus { background: transparent !important; }
    .main-navigation li.tp-menu-logo img {
        height: 86px;               /* user-tuned value */
        width: auto;
        display: block;
    }
}
@media (max-width: 768px) {
    .main-navigation li.tp-menu-logo,
    .main-navigation .main-nav > ul > li.tp-menu-logo,
    .main-navigation ul.menu > li.tp-menu-logo,
    .main-navigation ul.sf-menu > li.tp-menu-logo { display: none !important; }
}

/* Header logo: tight crop, no extra padding/border around the logo */
.site-logo img,
.site-header .header-image,
.site-header img.is-logo-image {
    max-height: 72px !important;
    width: auto !important;
    object-fit: contain;
    padding: 0 !important;
    border: 0 !important;
}
.site-header { padding-top: 12px; padding-bottom: 12px; }
.inside-header { padding-top: 8px !important; padding-bottom: 8px !important; }

/* === Mobile navigation: show menu inline at the top (no off-canvas, no hamburger) === */
@media (max-width: 768px) {
    /* Hide the off-canvas hamburger */
    .menu-toggle,
    button.menu-toggle,
    .has-menu-bar-items .menu-bar-items { display: none !important; }

    /* Reset every nav wrapper so nothing drags the menu sideways.
       GP's .grid-container applies a 40px lateral padding on mobile via its
       own stylesheet; we strip it here for the nav specifically. */
    .main-navigation,
    .main-navigation .inside-navigation,
    .main-navigation .inside-navigation.grid-container,
    .main-navigation .inside-navigation.grid-parent,
    .main-navigation .grid-container,
    .main-navigation .grid-parent,
    .main-navigation .main-nav {
        display: block !important;
        float: none !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        text-align: center !important;
        background: var(--tp-base) !important;
        box-sizing: border-box !important;
    }
    .main-navigation {
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }

    /* The UL itself: a centered flex row that wraps. Override Superfish (sf-menu)
       which floats items left and would push everything to the right. */
    .main-navigation .main-nav > ul,
    .main-navigation ul.menu,
    .main-navigation ul.sf-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.25rem 0.5rem !important;
        padding: 0.5rem 0.5rem !important;
        margin: 0 auto !important;
        list-style: none !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    .main-navigation .main-nav > ul > li,
    .main-navigation ul.menu > li,
    .main-navigation ul.sf-menu > li {
        float: none !important;
        display: inline-flex !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1.2;
    }

    /* Mobile layout: language switcher on its own row ABOVE the page links.
       Technique: language items get order:-1; a pseudo "::before" with
       width:100% (order: 0) forces a flex-wrap line break between rows. */
    .main-navigation .main-nav > ul::before,
    .main-navigation ul.menu::before,
    .main-navigation ul.sf-menu::before {
        content: '';
        width: 100%;
        order: 0;
        flex-basis: 100%;
    }
    .main-navigation .main-nav > ul > li.tp-lang-switch { order: -1 !important; }
    .main-navigation .main-nav > ul > li:not(.tp-lang-switch) { order: 1 !important; }
    .main-navigation .main-nav > ul > li > a {
        padding: 0.5rem 0.7rem !important;
        font-size: 0.92rem !important;
        line-height: 1.2;
        white-space: nowrap;
    }
    /* Compact language switcher on mobile */
    .main-navigation .main-nav > ul > li.tp-lang-switch > a {
        padding: 0.25em 0.55em !important;
        font-size: 0.78rem !important;
    }

    /* Smaller hero on mobile */
    .wp-block-cover.tp-hero { min-height: 300px !important; }
    .wp-block-cover.tp-hero .wp-block-cover__inner-container { padding: 1.5rem 1rem !important; }
}

/* Language switcher in nav: small pill, separated */
.main-nav .menu-item.tp-lang-switch {
    margin-left: 0.3em;
}
.main-nav .menu-item.tp-lang-switch a {
    padding: 0.25em 0.7em !important;
    border: 1px solid #ccc;
    border-radius: 999px;
    font-size: 0.85em;
    margin: 0 0.15em;
}
.main-nav .menu-item.tp-lang-switch.current-lang a {
    background: var(--tp-primary);
    color: #FFFFFF !important;
    border-color: var(--tp-primary);
}

/* Footer */
.site-footer, .site-info, .footer-widgets, .footer-bar {
    background: var(--tp-ink) !important;
    color: #F3EEE7 !important;
}
.site-footer a, .footer-widgets a, .footer-bar a { color: #FFFFFF !important; text-decoration: underline; }
.footer-widgets .widget-title { color: #FFFFFF !important; }

/* Gallery */
.wp-block-gallery .wp-block-image img { border-radius: 6px; }

/* Fluent Forms */
.fluent_form_TP_FORM .ff-el-input--content input,
.fluentform .ff-el-input--content input,
.fluentform .ff-el-input--content textarea {
    border: 1px solid #d0d0d0;
    padding: 0.65em 0.9em;
    border-radius: 6px;
    font-size: 1em;
    width: 100%;
}
.fluentform button.ff-btn,
.fluentform button[type="submit"] {
    background: var(--tp-primary) !important;
    color: #FFFFFF !important;
    border: none;
    border-radius: 999px;
    padding: 0.7em 1.6em;
    font-weight: 600;
    cursor: pointer;
}
.fluentform button.ff-btn:hover { background: var(--tp-primary-dark) !important; }
.ff-el-input--label label { font-weight: 500; color: var(--tp-ink); }

/* Wider content for blocks */
.full-width-content .site-content,
.wp-block-cover.alignfull { width: 100%; max-width: 100% !important; }