/*
Theme Name: Acabado Child
Theme URI: https://aroundeurope.blog
Description: Custom child theme for Acabado with typography and layout enhancements.
Author: [Your Name]
Template: acabado
Version: 1.1
*/

/* ==============================================================
   1️⃣ Design Tokens (CSS Custom Properties)
   ============================================================== */
:root {
    /* Colours */
    --c-text:          #080B12;
    --c-bg:            #FFFFFF;
    --c-light-bg:      #F9F9F9;
    --c-primary:       #0073AA;
    --c-primary-hov:   #8ec1fc;
    --c-border:        #E6E6E6;
    --c-secondary:     #666666;

    /* Spacing & Radii */
    --gap-xs:          .4rem;   /* thin borders, small offsets */
    --gap-sm:          .6rem;
    --gap-md:          1rem;
    --gap-lg:          1.5rem;
    --radius:          .4rem;

    /* Transitions */
    --transition-fast: .2s ease;
    --transition-xfast: .1s ease;

    /* Typography */
    --fs-base:         2rem;      /* 20 px (root = 10 px) */
    --fs-h1:           5rem;
    --fs-h2:           4.5rem;
    --fs-h3:           3.2rem;
    --fs-h4:           2.2rem;
    --fs-lead:         2rem;      /* paragraphs, buttons, etc. */
    --fs-small:        1.6rem;    /* widget titles, footers */

    --lh-base:         1.5;
    --lh-lead:         1.6;
    --lh-heading:      1.4;
    --lh-blockquote:   1.4;

    /* Base font‑size – 1 rem = 10 px */
    font-size: 10px;
}


/* ==============================================================
   2️⃣ Global Reset & Base Styles
   ============================================================== */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen,
                 Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
                 "Helvetica Neue", sans-serif;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
    word-break: break-word;
    text-size-adjust: 100%;
}

/* ==============================================================
   3️⃣ Layout Containers (Posts & Pages)
   ============================================================== */
.post-container,
.page .post-container {
    max-width: 67rem;               /* ≈ 670 px */
    margin-inline: auto;
    padding-inline: var(--gap-lg);
}

/* ==============================================================
   4️⃣ Headings & Paragraphs
   ============================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Livvic', sans-serif !important;
    font-weight: 700 !important;
    color: var(--c-text) ;
    line-height: var(--lh-heading) !important;
    margin-left: -0.1rem !important;   /* replicates original offset */
}

/* Individual heading sizes */
h1 { font-size: var(--fs-h1); margin: 5rem 0 2rem; }
h2 { font-size: var(--fs-h2); margin: 4.5rem 0 1.8rem; }
h3 { font-size: var(--fs-h3); margin: 3.2rem 0 1.8rem; }
h4 { font-size: var(--fs-h4); margin: 2.2rem 0 1.8rem; }

/* Paragraphs */
p {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    margin-bottom: 3rem;
}

/* ==============================================================
   5️⃣ Lists & Blockquotes
   ============================================================== */
ul, ol {
    font-size: var(--fs-lead);
    line-height: var(--lh-base);
    margin-bottom: 1rem;
    list-style-position: outside;
}

blockquote,
.wp-block-quote,
.wp-block-quote.is-layout-flow,
blockquote.wp-block-quote-is-layout-flow {
    border-left: var(--gap-xs) solid var(--c-primary);
    padding: .5em 1em;
    margin: 3rem 0;
    color: var(--c-text);
    font-style: italic;
    background: var(--c-light-bg);
    line-height: var(--lh-blockquote);
}

/* ==============================================================
   6️⃣ Links
   ============================================================== */
a {
    color: var(--c-text);
    text-decoration: underline;
    text-decoration-color: rgba(8,11,18,.4);
    text-underline-offset: .15em;
    transition: color var(--transition-fast),
                text-decoration-color var(--transition-fast);
}
a:hover,
a:focus {
    color: var(--c-primary-hov);
    text-decoration-color: currentColor;
}

/* ==============================================================
   7️⃣ Meta Information (below the title)
   ============================================================== */
.entry-header .entry-meta,
.entry-meta,
.entry-meta * {
    font-family: 'Livvic', sans-serif;
    font-size: 1.6rem !important;
    color: var(--c-secondary);
    line-height: var(--lh-base);
}
.entry-header .entry-meta a {
    text-decoration: underline;
    color: inherit;
}

/* ==============================================================
   8️⃣ Kadence Infobox Blocks
   ============================================================== */
.kt-blocks-info-box-title {
    font-family: 'Livvic', sans-serif;
    font-size: 3.4rem;
    font-weight: 700;
    line-height: var(--lh-heading);
}
.kt-blocks-info-box-text {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
}
.kt-blocks-infobox a {
    text-decoration: underline;
}

/* ==============================================================
   9️⃣ Images
   ============================================================== */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 3rem auto;
    border-radius: 1.5rem;
}

/* ==============================================================
   🔟 WordPress Core Button Block
   ============================================================== */
/* Wrapper – keeps the button inline‑block */
.wp-block-button,
.wp-block-buttons {
    display: inline-block;
    margin: 0;
}

/* Actual clickable element – works for both class names */
.wp-block-button__link,
.wp-block-button a,
.wp-element-button,
.wp-block-button__link.wp-element-button,
.wp-block-button__link.has-text-align-center {
                           /* reset browser defaults */
    display: inline-block;
    box-sizing: border-box;
    font-family: inherit;
    font-size: var(--fs-lead);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    color: #fff;
    background: var(--c-primary);
    border-radius: var(--radius);
    padding: 1rem 2.2rem;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast),
                transform var(--transition-xfast),
                opacity var(--transition-fast);
}
.wp-block-button__link:hover,
.wp-element-button:hover,
.wp-block-button__link:focus,
.wp-element-button:focus {
    background: var(--c-primary-hov);
    transform: translateY(-2px);
    opacity: 0.95;

}

/* ==============================================================
   1️⃣1️⃣ Sidebar Widgets
   ============================================================== */
aside#secondary .widget-title {
    font-size: 2.4rem;
    font-weight: 700;
    font-family: 'Livvic', sans-serif;
}
aside#secondary p {
    font-size: var(--fs-lead);
    line-height: var(--lh-base);
}
aside#secondary button,
aside#secondary a.button {
    font-size: var(--fs-lead);
    font-weight: 700;
    padding: .6rem 1rem;
    border-radius: var(--radius);
    cursor: pointer;
}

/* ==============================================================
   1️⃣2️⃣ Navigation
   ============================================================== */
#site-navigation.main-navigation a {
    text-decoration: none;
}
#site-navigation.main-navigation a:hover {
    text-decoration: underline;
}

/* Keep desktop menu visible on wide tablets (1200‑1950 px) */
@media (min-width: 1200px) and (max-width: 1950px) {
    #site-navigation { display: block !important; }
    #site-navigation ul { display: flex !important; }
    .menu-toggle { display: none !important; }
}

/* Hide hamburger label on medium screens */
@media (min-width: 650px) and (max-width: 1200px) {
    .hamburger-box .label,
    .hamburger-box span.label,
    span.label { display: none !important; }
}

/* ==============================================================
   1️⃣3️⃣ Footer Columns
   ============================================================== */
footer .footer-columns .widget-title,
footer .footer-columns .widget h2,
footer .footer-columns .widget h3 {
    font-family: inherit;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--c-bg);
    margin-bottom: .8rem;
}

/* ==============================================================
   1️⃣4️⃣ Custom Sections – Articles Wrapper
   ============================================================== */
.articles-wrapper .section-header-text,
.section-header-text {
    font-size: 3rem !important;
    font-family: 'Livvic', sans-serif;
    font-weight: 700;
}
.articles-wrapper .button {
    font-size: 1.6rem !important;
    padding: .8rem 1.4rem !important;
    font-weight: 700 !important;
    font-family: 'Livvic', sans-serif !important;
    border-radius: var(--radius) !important;
    background-color: var(--global-palette-btn-bg, #333) !important;
    color: var(--global-palette-btn-text, #fff) !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: background .3s ease !important;
}
.articles-wrapper .button:hover {
    background: var(--global-palette-btn-bg-hover, #555) !important;
}

.travel-itinerary-wrapper .section-title h2 {
    font-size: 3rem !important;
    font-family: 'Livvic', sans-serif !important;
    font-weight: 700;
    color: var(--c-text) !important;
    line-height: var(--lh-heading);
    margin-left: -0.1rem !important;
    
}


.recent-articles-container .button-container .button {
    font-size: var(--fs-base) !important;
}

h3.h2 {
  font-family: 'Livvic', sans-serif;
  font-size: var(--fs-h3);

}

/* Make sure it only applies to the homepage or posts list area,
   not everywhere an .h2 class might appear */
.home h3.h2,
.archive h3.h2,
.single-post h3.h2 {
  font-size: var(--fs-h3) !important;
}

.author-info .h3 {
    font-size: var(--fs-h4) !important;
}

/* ==============================================================
   1️⃣5️⃣ Page‑Specific Adjustments
   ============================================================== */
/* Hide titles on specific pages */
.page-id-3487 .entry-title,
.page-id-3465 .entry-title { display: none; }

/* Resources page layout */
.resources-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    font-family: system-ui, sans-serif;
}

/* Category headings */
.category h2 {
    font-size: 4.5rem;
    margin: 2rem 0 1rem;
    color: #2c3e50;
}

/* ============================================================== 
   1️⃣6️⃣ Responsive Adjustments – Readability & Spacing 
   ============================================================== */

/* Tablets and small laptops (601 px – 768 px) */
@media (min-width: 601px) and (max-width: 768px) {
    :root { font-size: 9.5px; }

    h2 { font-size: 3.8rem; margin: 3rem 0 1.6rem; }
    h3 { font-size: 2.8rem; margin: 2.5rem 0 1.4rem; }

    p,
    ul,
    ol {
        font-size: 2rem;
        line-height: 1.7;
        padding: 0 1rem;
        margin-bottom: 1.6rem;
    }

    .widget-title {
        font-size: 1.8rem;
        line-height: 1.5;
        padding: 0 1rem;
    }
}

/* Phones (0 px – 600 px) */
@media (max-width: 600px) {
    :root { font-size: 9px; }

    h2 { font-size: 3.4rem; margin: 2.4rem 0 1.2rem; }
    h3 { font-size: 2.6rem; margin: 2rem 0 1.2rem; }

    p,
    ul,
    ol {
        font-size: 1.9rem;
        line-height: 1.75;
        padding: 0 1.2rem;
        margin-bottom: 1.5rem;
    }

    .widget-title {
        font-size: 1.6rem;
        line-height: 1.5;
        padding: 0 1rem;
    }
}


/* ==============================================================
   1️⃣7️⃣ Optional Accessibility Helper (keep if you need it)
   ============================================================== */
.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ==============================================================
   🔁 Section Overrides
   ============================================================== */
/* These rules intentionally live at the end of the file so they override
   any same-specificity CSS from the Acabado parent theme or plugins. */

/* --- Buttons (override parent #content rules) --- */
/* ==============================================================
   1️⃣8️⃣  Fix – Buttons overridden by parent (#content selector)
   ============================================================== */
   
   /* --- BUTTON FIX ---
   These !important declarations beat Acabado’s #content rules.
   Keep at end of file to preserve priority.
*/

#content .wp-block-button__link,
#content .wp-element-button,
#content a.wp-block-button__link,
#content a.wp-element-button {
    display: inline-block;
    box-sizing: border-box;
    font-family: inherit;
    font-size: var(--fs-lead);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    color: #fff !important;
    background: var(--c-primary) !important;
    border-radius: var(--radius);
    padding: 1rem 2.2rem;
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--transition-fast),
        transform var(--transition-xfast),
        opacity var(--transition-fast);
}

#content .wp-block-button__link:hover,
#content .wp-element-button:hover {
    background: var(--c-primary-hov) !important;
    transform: translateY(-2px);
    opacity: 0.95;
}


/* --- Blockquotes (override layout-flow selectors) --- */
/* --- BLOCKQUOTE FIX (Acabado override-safe) --- */
body blockquote,
body .wp-block-quote,
body .wp-block-quote.is-layout-flow,
body blockquote.wp-block-quote-is-layout-flow {
    border-left: 0.4rem solid var(--c-primary) !important;
    padding: .5em 1em !important;
    margin: 3rem 0 !important;
    color: var(--c-text) !important;
    font-style: italic;
    background: var(--c-light-bg) !important;
    line-height: var(--lh-blockquote) !important;
    
}

blockquote p {
    font-size: var(--fs-lead);
}


.hero-container,
.mobile-hero-container,
.desktop-hero-container {
  margin-bottom: 2rem;
}

.hero-container + .featured-categories-wrapper::before,
.mobile-hero-container + .featured-categories-wrapper::before,
.desktop-hero-container + .featured-categories-wrapper::before {
  content: "";
  display: block;
  width: 80%;
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
  margin: 1rem auto 1.5rem auto;
  border-radius: 1px;
}