/*
 Theme Name:   BettyDreams
 Theme URI:    https://bettydreams.com
 Description:  Custom GeneratePress child theme for BettyDreams - Betty's Place. "Betty's Cottage": the site's pastel pink leads a warm, homey portal look - blush hero with a scalloped edge, hand-stitched rose borders, and a Dream Meanings gallery where each illustration's painted title banner does the talking. Fully responsive.
 Author:       BettyDreams
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  bettydreams-child
*/

/* ===========================================
   DESIGN SYSTEM - "Betty's Cottage"
   Palette pulled from the logo wordmark:
   bubblegum pink + sky blue + outline ink.
   Header keeps its pastel pink.
   =========================================== */
:root {
    --bcot-pink: #FCDDE5;       /* header pastel - kept as-is */
    --bcot-bubble: #FF87A7;     /* logo pink */
    --bcot-sky: #61CEF6;        /* logo blue */
    --bcot-pink-text: #D6487A;  /* text-safe logo pink */
    --bcot-sky-text: #1E8FC4;   /* text-safe logo blue */
    --bcot-ink: #241B20;        /* logo outline ink */
    --bcot-page: #FFF8FB;       /* page background */
    --bcot-card: #FFFFFF;       /* card fill */
    --bcot-soft: #9A8791;       /* muted text */
    --bcot-stitch: #FFB9CC;     /* dashed stitch borders - soft logo pink */

    --bcot-display: "Mali", "Comic Sans MS", cursive;
}

/* ===========================================
   HEADER - pink fabric with an embroidered hem
   (background pink + logo are the existing
   customizer settings, untouched)
   =========================================== */
.site-header .inside-header {
    padding: 15px 40px 14px;
}

/* --- Menu: soft white label tags on the pink header;
       current page fills with logo pink (customizer),
       hover blushes (customizer) --- */
.main-navigation .main-nav > ul > li {
    margin-left: 12px;
}

.main-navigation .main-nav > ul > li > a {
    background-color: var(--bcot-bubble);
    border: 2px solid transparent;
    border-radius: 10px;
    line-height: 1.4;
    padding: 8px 20px;
    box-shadow: 0 2px 6px rgba(36, 27, 32, 0.06);
}

.main-navigation .main-nav > ul > li:hover > a {
    border-color: rgba(255, 255, 255, 0.65);
}

.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current_page_item > a {
    border-color: #FFFFFF;
}

.main-navigation .main-nav > ul > li > a:focus-visible {
    outline: 3px solid var(--bcot-ink);
    outline-offset: 2px;
}

/* Search toggle in the menu bar */
.main-navigation .menu-bar-items {
    color: var(--bcot-ink);
}

@media (max-width: 768px) {
    /* GP stacks the header at this width: logo on top,
       menu centered underneath (its own static CSS). */
    .site-header .inside-header {
        padding: 12px 16px 11px;
    }

    .site-header .header-image {
        width: 100%;
        max-width: 230px;
        height: auto;
    }

    /* Breathing room between the stacked logo and the menu */
    .site-header .inside-header > .site-logo {
        margin-bottom: 4px;
    }

    .main-navigation .main-nav > ul {
        justify-content: center;
    }

    .main-navigation .main-nav > ul > li {
        margin-left: 5px;
        margin-right: 5px;
    }

    .main-navigation .main-nav > ul > li > a {
        padding: 7px 16px;
    }
}

/* ===========================================
   HOMEPAGE CANVAS
   =========================================== */
body.bcot-home {
    background-color: var(--bcot-page);
}

body.bcot-home .site-content {
    padding-top: 0;
}

/* ===========================================
   HERO - daydream wall: the logo's pink melting
   into its sky blue; clean rectangular band
   =========================================== */
.bcot-hero {
    background-image: linear-gradient(115deg, #FFE2EA 0%, #FFF0F4 42%, #DDF3FD 100%);
    text-align: center;
}

.bcot-hero-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 34px 24px 38px;
}

.bcot-hero-title {
    font-family: var(--bcot-display);
    font-weight: 600;
    font-size: clamp(32px, 4.6vw, 48px);
    line-height: 1.12;
    color: var(--bcot-ink);
    margin: 0;
}

.bcot-hero-betty {
    color: var(--bcot-pink-text);
}

.bcot-hero-place {
    color: var(--bcot-sky-text);
}

/* --- The Portal Hub Card - today one room (Dreams),
       future sections become more pills in the row --- */
.bcot-hub {
    max-width: 780px;
    margin: 26px auto 0;
    background-color: #FFFFFF;
    border-radius: 26px;
    box-shadow: 0 8px 26px rgba(36, 27, 32, 0.12);
    padding: 22px 26px 24px;
    text-align: left;
}

.bcot-hub-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.bcot-hub-pill {
    background-color: var(--bcot-bubble);
    color: #FFFFFF;
    font-family: var(--bcot-display);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    border-radius: 10px;
    padding: 8px 26px;
}

.bcot-hub-slot {
    color: #C9BCC3;
    font-size: 14.5px;
    line-height: 1.4;
}

.bcot-hub-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #FFF3F7;
    border-radius: 12px;
    padding: 9px 9px 9px 26px;
    margin: 16px 0 0;
}

.bcot-hub-search:focus-within {
    outline: 2px solid var(--bcot-sky);
    outline-offset: 2px;
}

.bcot-hub-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    background-color: transparent;
    border: 0;
    outline: 0;
    font-size: 18px;
    line-height: 1.5;
    color: var(--bcot-ink);
    padding: 9px 0;
}

.bcot-hub-search input[type="search"]::placeholder {
    color: #B4A6AD;
}

.bcot-hub-search button {
    flex: 0 0 auto;
    background-color: var(--bcot-sky);
    color: var(--bcot-ink);
    font-family: var(--bcot-display);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    border: 0;
    border-radius: 9px;
    padding: 12px 34px;
    cursor: pointer;
}

.bcot-hub-search button:hover,
.bcot-hub-search button:focus {
    background-color: var(--bcot-bubble);
    color: #FFFFFF;
}

.bcot-hub-search button:focus-visible {
    outline: 3px solid var(--bcot-ink);
    outline-offset: 2px;
}

/* ===========================================
   DREAM MEANINGS
   =========================================== */
.bcot-dreams {
    padding: 46px 0 64px;
}

/* Full-bleed container - the card gallery spans the
   same width as the hero band above it */
.bcot-inner {
    margin: 0 auto;
    padding: 0 20px;
}

.bcot-head {
    text-align: center;
    margin-bottom: 28px;
}

.bcot-title {
    font-family: var(--bcot-display);
    font-weight: 600;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.15;
    color: var(--bcot-ink);
    margin: 0;
}

/* --- Card gallery - the painted banner in each
       illustration is the card's title --- */
.bcot-dream-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.bcot-card {
    display: block;
    background-color: var(--bcot-card);
    border: 2px dashed var(--bcot-stitch);
    border-radius: 18px;
    padding: 8px;
    box-shadow: 0 3px 12px rgba(36, 27, 32, 0.07);
}

.bcot-card:hover,
.bcot-card:focus {
    border-color: var(--bcot-sky);
    box-shadow: 0 3px 16px rgba(30, 143, 196, 0.16);
}

.bcot-card:focus-visible {
    outline: 3px solid var(--bcot-sky-text);
    outline-offset: 3px;
}

/* The illustration: top-anchored 4:5 crop shows the
   painted title banner; the bottom edge stays outside
   the crop. (img is a leaf element - nothing renders
   inside it, so the crop can only ever affect the
   photo itself.) */
.bcot-card-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 0;
    border-radius: 12px;
}

/* --- See all button --- */
.bcot-more {
    text-align: center;
    margin-top: 38px;
}

.bcot-more-btn {
    display: inline-block;
    font-family: var(--bcot-display);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    background-color: var(--bcot-sky);
    border-radius: 10px;
    padding: 13px 34px;
}

.bcot-more-btn,
.bcot-more-btn:visited {
    color: var(--bcot-ink);
}

.bcot-more-btn:hover,
.bcot-more-btn:focus {
    background-color: var(--bcot-bubble);
    color: var(--bcot-ink);
}

.bcot-more-btn:focus-visible {
    outline: 3px solid var(--bcot-ink);
    outline-offset: 3px;
}

/* ===========================================
   SINGLE POSTS - brand title treatment
   =========================================== */
body.single-post h1.entry-title {
    font-family: var(--bcot-display);
    font-weight: 600;
    font-size: clamp(30px, 4vw, 40px);
    line-height: 1.22;
    color: var(--bcot-ink);
    text-align: center;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-bottom: 14px;
}

/* Meta line under the title - quiet, centered, on-palette */
body.single-post .entry-header .entry-meta {
    text-align: center;
    font-size: 14.5px;
    letter-spacing: 0.02em;
    color: var(--bcot-soft);
    margin-top: 14px;
}

body.single-post .entry-header .entry-meta a,
body.single-post .entry-header .entry-meta a:visited {
    color: var(--bcot-pink-text);
    text-decoration: none;
    font-weight: 600;
}

body.single-post .entry-header .entry-meta a:hover,
body.single-post .entry-header .entry-meta a:focus {
    color: var(--bcot-sky-text);
}

/* Underline as wide as the title itself, split half
   pink / half blue like the wordmark */
body.single-post h1.entry-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    border-top: 5px solid var(--bcot-bubble);
    border-radius: 3px 0 0 3px;
}

body.single-post h1.entry-title::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    border-top: 5px solid var(--bcot-sky);
    border-radius: 0 3px 3px 0;
}

/* In-post dream meaning headings - soft blush band
   with the logo-pink edge, Mali type */
body.single-post h2.h2-dream-meanings {
    font-family: var(--bcot-display);
    font-weight: 700;
    font-size: clamp(22px, 5vw, 30px);
    line-height: 1.3;
    color: var(--bcot-ink);
    background-color: #FFF3F7;
    border-radius: 10px;
    padding: 12px 20px;
    margin-top: 42px;
    text-align: center;
    text-wrap: balance;
}

/* In-post dream questions - sky band, the blue
   counterpart to the blush heading bands */
body.single-post b.dream-questions {
    display: block;
    font-family: var(--bcot-display);
    font-weight: 600;
    font-size: clamp(18px, 4.5vw, 21px);
    line-height: 1.45;
    color: var(--bcot-ink);
    background-color: #EAF6FE;
    border-radius: 10px;
    padding: 14px 20px;
    margin: 26px 0 20px;
    text-align: center;
    text-wrap: balance;
}

/* ===========================================
   SIDEBAR - stitched cottage widget cards
   (background + title color come from the
   customizer; chrome lives here)
   =========================================== */
.sidebar .widget {
    border: 2px dashed var(--bcot-stitch);
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(36, 27, 32, 0.07);
}

.sidebar .widget .widget-title,
.sidebar .widget h2.wp-block-heading {
    font-family: var(--bcot-display);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.25;
    color: var(--bcot-ink);
}

/* Search widget - mirrors the hero hub search */
.sidebar .wp-block-search .wp-block-search__input {
    background-color: #FFF3F7;
    border: 0;
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--bcot-ink);
    padding: 10px 16px;
}

.sidebar .wp-block-search .wp-block-search__input:focus {
    outline: 2px solid var(--bcot-sky);
    outline-offset: 2px;
}

.sidebar .wp-block-search .wp-block-search__input::placeholder {
    color: #B4A6AD;
}

.sidebar .wp-block-search .wp-block-search__button {
    background-color: var(--bcot-sky);
    color: var(--bcot-ink);
    font-family: var(--bcot-display);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    border: 0;
    border-radius: 9px;
    padding: 10px 20px;
    margin-left: 8px;
    cursor: pointer;
}

.sidebar .wp-block-search .wp-block-search__button:hover,
.sidebar .wp-block-search .wp-block-search__button:focus {
    background-color: var(--bcot-bubble);
    color: #FFFFFF;
}

/* List widgets (categories, archives, recent posts) -
   ready for when they're added */
.sidebar .widget li.cat-item a,
.sidebar .wp-block-categories li a,
.sidebar .wp-block-archives li a,
.sidebar .wp-block-latest-posts li a {
    color: var(--bcot-ink);
    text-decoration: none;
}

.sidebar .widget li.cat-item a:hover,
.sidebar .wp-block-categories li a:hover,
.sidebar .wp-block-archives li a:hover,
.sidebar .wp-block-latest-posts li a:hover {
    color: var(--bcot-pink-text);
}

/* ===========================================
   FOOTER - pink hem bookending the header
   =========================================== */
.bcot-foot-scallop {
    display: block;
    width: 100%;
    margin-bottom: -1px;
}

.site-footer {
    background-color: var(--bcot-pink);
}

.site-info {
    background-color: transparent;
}

.site-footer .inside-site-info {
    padding: 0;
}

.bcot-foot {
    text-align: center;
    padding: 10px 24px 8px;
}

.bcot-foot-name {
    font-family: var(--bcot-display);
    font-weight: 700;
    font-size: 31px;
    line-height: 1.2;
    margin: 0;
}

.bcot-foot-betty {
    color: var(--bcot-pink-text);
}

.bcot-foot-dreams {
    color: var(--bcot-sky-text);
}

.bcot-foot-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 22px;
    margin-top: 7px;
}

.bcot-foot-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.bcot-foot-links a,
.bcot-foot-links a:visited {
    color: var(--bcot-ink);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.bcot-foot-links a:hover,
.bcot-foot-links a:focus {
    color: var(--bcot-pink-text);
}

.bcot-foot-links a:focus-visible {
    outline: 3px solid var(--bcot-sky-text);
    outline-offset: 2px;
}

/* Facebook - round white chip, logo-blue glyph */
.bcot-foot-fb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    color: var(--bcot-sky-text);
    border-radius: 50%;
    padding: 11px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(36, 27, 32, 0.10);
}

/* Kill the inline-baseline offset so the glyph sits dead center */
.bcot-foot-fb svg {
    display: block;
}

.bcot-foot-fb:hover,
.bcot-foot-fb:focus {
    background-color: var(--bcot-sky);
    color: #FFFFFF;
}

.bcot-foot-fb:focus-visible {
    outline: 3px solid var(--bcot-ink);
    outline-offset: 2px;
}

.bcot-foot-copy {
    font-size: 14.5px;
    line-height: 1.5;
    color: #8E6E7C;
    margin: 7px 0 0;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1024px) {
    .bcot-dream-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }
}

@media (max-width: 640px) {
    .bcot-hero-inner {
        padding: 26px 18px 30px;
    }

    .bcot-hub {
        padding: 16px 16px 18px;
    }

    .bcot-hub-search {
        padding-left: 18px;
    }

    .bcot-hub-search input[type="search"] {
        font-size: 16px;
    }

    .bcot-hub-search button {
        font-size: 17px;
        padding: 11px 24px;
    }

    .bcot-dream-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .bcot-card {
        border-radius: 14px;
        padding: 6px;
    }

    .bcot-card-img {
        border-radius: 9px;
    }

    .bcot-dreams {
        padding: 38px 0 52px;
    }

    .bcot-inner {
        padding: 0 16px;
    }

    body.single-post h2.h2-dream-meanings {
        padding: 10px 14px;
        margin-top: 34px;
    }
}