/*
Theme Name:  YVRBlog Child
Theme URI:   https://yvrblog.com
Description: YVRBlog child theme built on GeneratePress. Metro Vancouver local lifestyle media.
Author:      YVRBlog
Version:     1.1.0
Template:    generatepress
Text Domain: yvrblog-child
*/

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {
    /* Editorial palette — charcoal + off-white + soft red accent */
    --red:        #dc2626;
    --red-dark:   #b91c1c;
    --red-light:  #fef2f2;
    --black:      #0f1419;
    --ink:        #1f2933;
    --body:       #3d4852;
    --muted:      #6b7280;
    --soft:       #9ca3af;
    --border:     #e5e7eb;
    --border-soft:#f0f1f3;
    --bg:         #fafafa;
    --bg-warm:    #f5f4f1;
    --white:      #ffffff;
    --nav-bg:     #1f2933;
    --nav-hover:  #2a3441;
    --footer-bg:  #1f2933;
    --footer-deep:#171e26;
    --topbar-bg:  #1f2933;

    --font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --serif:      Georgia, 'Times New Roman', serif;

    --max:        1200px;
    --narrow:     760px;
    --r:          6px;
    --r-lg:       10px;

    --shadow-sm:  0 1px 2px rgba(15, 20, 25, 0.06);
    --shadow:     0 4px 16px rgba(15, 20, 25, 0.08);
    --shadow-lg:  0 12px 32px rgba(15, 20, 25, 0.10);

    --ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ==========================================================================
   RESET — BEAT GENERATEPRESS SPECIFICITY CLEANLY
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family:             var(--font);
    font-size:               17px;
    line-height:             1.7;
    color:                   var(--body);
    background:              var(--white);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin:                  0;
    padding:                 0;
}

img {
    max-width: 100%;
    height:    auto;
    display:   block;
}

a {
    color:           var(--red);
    text-decoration: none;
    transition:      color 0.15s var(--ease);
}

a:hover { color: var(--red-dark); }

h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    line-height: 1.2;
    color:       var(--ink);
    margin:      0 0 0.5em;
}

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.5em; margin: 0 0 1em; }

/* Neutralise any GP leftover on these pages */
.site-header,
.site-branding,
.main-navigation,
.site-footer,
.nav-menu,
#primary,
.content-area,
.site-content,
.inside-header,
.inside-navigation { all: unset; display: revert; }

/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */

.yvr-site-wrap {
    display:        flex;
    flex-direction: column;
    min-height:     100vh;
}

.yvr-content-wrap {
    flex: 1;
}

.yvr-container {
    max-width:     var(--max);
    margin-left:   auto;
    margin-right:  auto;
    padding-left:  1.5rem;
    padding-right: 1.5rem;
}

.yvr-container--narrow {
    max-width:     var(--narrow);
    margin-left:   auto;
    margin-right:  auto;
    padding-left:  1.5rem;
    padding-right: 1.5rem;
}

.yvr-section {
    padding: 2.5rem 0 3rem;
}

.yvr-section + .yvr-section { padding-top: 2.5rem; }

.yvr-section--gray { background: var(--bg); }
.yvr-section--dark { background: var(--ink); color: var(--white); }

/* ==========================================================================
   SKIP LINK
   ========================================================================== */

.yvr-skip-link {
    position:   absolute;
    top:        -999px;
    left:       0;
    background: var(--red);
    color:      var(--white);
    padding:    0.6em 1.2em;
    z-index:    9999;
    font-weight: 700;
}

.yvr-skip-link:focus { top: 0; }

/* ==========================================================================
   TOP BAR
   ========================================================================== */

.yvr-topbar {
    background:     var(--topbar-bg);
    color:          #cbd5e1;
    font-size:      0.74rem;
    font-weight:    500;
    letter-spacing: 0.04em;
    padding:        0.6rem 0;
}

.yvr-topbar__inner {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             1rem;
}

.yvr-topbar__region { color: #cbd5e1; }
.yvr-topbar__date   { color: #94a3b8; }

/* ==========================================================================
   MASTHEAD
   ========================================================================== */

.yvr-masthead {
    background:    var(--white);
    padding:       1.75rem 0;
    border-bottom: 1px solid var(--border);
}

.yvr-masthead__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             2.5rem;
}

.yvr-masthead__brand { flex-shrink: 0; }

.yvr-masthead__logo {
    display:         block;
    text-decoration: none;
    color:           var(--ink);
    line-height:     1;
}

.yvr-masthead__site-name {
    display:         inline-block;
    font-size:       2.2rem;
    font-weight:     900;
    letter-spacing:  -1.5px;
    color:           var(--ink);
    line-height:     1;
    font-style:      normal;
    position:        relative;
}

.yvr-masthead__site-name::after {
    content:       '.';
    color:         var(--red);
    margin-left:   1px;
}

.yvr-masthead__site-name span.yvr-accent {
    color: var(--red);
}

.yvr-masthead__tagline {
    font-size:      0.82rem;
    color:          var(--muted);
    margin:         0.4rem 0 0;
    letter-spacing: 0.01em;
    font-weight:    400;
    font-family:    var(--serif);
    font-style:     italic;
}

/* Search in masthead */
.yvr-masthead__actions .search-form {
    display:    flex;
    align-items: center;
    gap:         0;
}

.yvr-masthead__actions .search-field {
    border:        1px solid var(--border);
    border-right:  none;
    padding:       0.5em 0.9em;
    font-size:     0.85rem;
    border-radius: var(--r) 0 0 var(--r);
    outline:       none;
    width:         220px;
    color:         var(--body);
    background:    var(--white);
    font-family:   var(--font);
    transition:    border-color 0.15s;
}

.yvr-masthead__actions .search-field:focus {
    border-color: var(--red);
}

.yvr-masthead__actions .search-submit {
    background:    var(--red);
    color:         var(--white);
    border:        1px solid var(--red);
    padding:       0.5em 1em;
    font-size:     0.8rem;
    font-weight:   700;
    cursor:        pointer;
    border-radius: 0 var(--r) var(--r) 0;
    font-family:   var(--font);
    transition:    background 0.15s;
    white-space:   nowrap;
}

.yvr-masthead__actions .search-submit:hover {
    background: var(--red-dark);
}

/* ==========================================================================
   PRIMARY NAVIGATION
   ========================================================================== */

.yvr-nav {
    background:    var(--nav-bg);
    position:      sticky;
    top:           0;
    z-index:       500;
    box-shadow:    0 1px 0 rgba(0, 0, 0, 0.08);
}

.yvr-nav__inner {
    display:     flex;
    align-items: stretch;
    position:    relative;
    min-height:  48px;
}

/* Desktop menu */
.yvr-nav__menu-wrap { flex: 1; }

.yvr-nav__menu {
    display:     flex;
    list-style:  none;
    margin:      0;
    padding:     0;
    flex-wrap:   wrap;
    gap:         0;
}

.yvr-nav__menu li { position: relative; }

.yvr-nav__menu > li > a {
    display:        block;
    padding:        1rem 1.1rem;
    font-size:      0.78rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color:          #e2e8f0;
    text-decoration: none;
    white-space:    nowrap;
    transition:     color 0.15s, background 0.15s;
    border-bottom:  3px solid transparent;
    margin-bottom:  -1px;
}

.yvr-nav__menu > li > a:hover,
.yvr-nav__menu > li.current-menu-item > a,
.yvr-nav__menu > li.current-menu-ancestor > a {
    color:               var(--white);
    background:          var(--nav-hover);
    border-bottom-color: var(--red);
}

/* Dropdown */
.yvr-nav__menu ul {
    display:       none;
    position:      absolute;
    top:           100%;
    left:          0;
    background:    #1a1a1a;
    min-width:     180px;
    list-style:    none;
    margin:        0;
    padding:       0.5rem 0;
    box-shadow:    0 4px 16px rgba(0,0,0,0.4);
    z-index:       100;
    border-top:    2px solid var(--red);
}

.yvr-nav__menu li:hover > ul { display: block; }

.yvr-nav__menu ul a {
    display:    block;
    padding:    0.5em 1.1em;
    font-size:  0.8rem;
    color:      #aaa;
    font-weight: 600;
    transition: color 0.15s;
}

.yvr-nav__menu ul a:hover { color: var(--white); }

/* Hamburger */
.yvr-nav__toggle {
    display:         none;
    align-items:     center;
    gap:             0.5rem;
    background:      none;
    border:          none;
    cursor:          pointer;
    padding:         0.75rem 0;
    color:           #ccc;
    font-size:       0.78rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.06em;
    font-family:     var(--font);
}

.yvr-nav__toggle-bar {
    display:    block;
    width:      20px;
    height:     2px;
    background: #ccc;
    transition: transform 0.2s, opacity 0.2s;
    margin:     2px 0;
}

.yvr-nav__toggle.is-open .yvr-nav__toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.yvr-nav__toggle.is-open .yvr-nav__toggle-bar:nth-child(2) {
    opacity: 0;
}
.yvr-nav__toggle.is-open .yvr-nav__toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ==========================================================================
   SECTION HEADERS
   ========================================================================== */

.yvr-section-header {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             1rem;
    margin-bottom:   1.5rem;
    padding-bottom:  0.75rem;
    border-bottom:   1px solid var(--border);
    position:        relative;
}

.yvr-section-header::before {
    content:    '';
    position:   absolute;
    bottom:     -1px;
    left:       0;
    width:      64px;
    height:     3px;
    background: var(--red);
}

.yvr-section-header__eyebrow {
    display:        inline-block;
    font-size:      0.7rem;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color:          var(--red);
    background:     transparent;
    padding:        0;
    border-radius:  0;
}

.yvr-section-header__title {
    font-size:      clamp( 1.3rem, 2.3vw, 1.65rem );
    font-weight:    900;
    color:          var(--ink);
    margin:         0;
    letter-spacing: -0.5px;
}

.yvr-section-header__link {
    font-size:       0.74rem;
    font-weight:     800;
    color:           var(--ink);
    text-transform:  uppercase;
    letter-spacing:  0.08em;
    white-space:     nowrap;
    text-decoration: none;
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    transition:      color 0.15s, gap 0.15s var(--ease);
}

.yvr-section-header__link:hover {
    color: var(--red);
    gap:   8px;
}

/* ==========================================================================
   TAGS — CATEGORY & LOCATION BADGES
   ========================================================================== */

.yvr-tag {
    display:         inline-flex;
    align-items:     center;
    font-size:       0.64rem;
    font-weight:     800;
    text-transform:  uppercase;
    letter-spacing:  0.1em;
    padding:         3px 8px;
    border-radius:   3px;
    text-decoration: none;
    line-height:     1.4;
    transition:      background 0.15s, color 0.15s, border-color 0.15s;
}

.yvr-tag:hover { text-decoration: none; }

.yvr-tag--cat {
    background: var(--red-light);
    color:      var(--red-dark);
    border:     1px solid transparent;
}

.yvr-tag--cat:hover {
    background: var(--red);
    color:      var(--white);
}

.yvr-tag--loc {
    background:  var(--white);
    color:       var(--muted);
    border:      1px solid var(--border);
    font-weight: 700;
}

.yvr-tag--loc::before {
    content:      '';
    display:      inline-block;
    width:        5px;
    height:       5px;
    border-radius: 50%;
    background:   var(--red);
    margin-right: 5px;
    flex-shrink:  0;
}

.yvr-tag--loc:hover {
    border-color: var(--ink);
    color:        var(--ink);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.yvr-hero {
    background: var(--ink);
    padding:    3.25rem 0 2.75rem;
    position:   relative;
    overflow:   hidden;
}

.yvr-hero::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    height:     4px;
    background: var(--red);
}

.yvr-hero__inner {
    max-width:  720px;
}

.yvr-hero__label {
    display:        inline-block;
    font-size:      0.7rem;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color:          var(--red);
    margin-bottom:  1rem;
}

.yvr-hero__headline {
    font-size:      clamp( 2rem, 4.5vw, 3.2rem );
    font-weight:    900;
    color:          var(--white);
    line-height:    1.1;
    letter-spacing: -1px;
    margin:         0 0 1.2rem;
}

.yvr-hero__sub {
    font-size:   1.05rem;
    color:       #999;
    line-height: 1.65;
    margin:      0 0 2rem;
    max-width:   560px;
}

.yvr-hero__ctas {
    display:  flex;
    gap:      0.75rem;
    flex-wrap: wrap;
}

/* ==========================================================================
   EDITORIAL HERO — featured story + 2-3 side trending stories
   ========================================================================== */

.yvr-edhero {
    background:    var(--white);
    padding:       2rem 0 2.5rem;
    border-bottom: 1px solid var(--border);
}

.yvr-edhero__inner {
    display:               grid;
    grid-template-columns: 1.75fr 1fr;
    gap:                   2.25rem;
    align-items:           stretch;
}

.yvr-edhero__main {
    display:        flex;
    flex-direction: column;
}

.yvr-edhero__side {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

/* Big featured card inside editorial hero */
.yvr-card--feature {
    border:        1px solid var(--border);
    border-radius: var(--r-lg);
    overflow:      hidden;
    background:    var(--white);
    flex:          1;
    display:       flex;
    flex-direction: column;
    transition:    transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.yvr-card--feature:hover {
    transform:  translateY( -2px );
    box-shadow: var(--shadow);
}

.yvr-card--feature .yvr-card__image {
    aspect-ratio: 16 / 9;
    border-radius: 0;
}

.yvr-card--feature .yvr-card__body {
    padding: 1.75rem 2rem 2rem;
    gap:     0.7rem;
}

.yvr-card--feature .yvr-card__title {
    font-size:      clamp( 1.5rem, 2.5vw, 2rem );
    line-height:    1.15;
    letter-spacing: -0.6px;
}

.yvr-card--feature .yvr-card__excerpt {
    font-size:   1rem;
    line-height: 1.62;
    color:       var(--body);
}

.yvr-card--feature .yvr-card__title a:hover {
    color: var(--red);
}

/* Side trending cards — horizontal layout */
.yvr-card--side {
    display:               grid;
    grid-template-columns: 120px 1fr;
    gap:                   1rem;
    border:                1px solid var(--border);
    border-radius:         var(--r);
    overflow:              hidden;
    background:            var(--white);
    transition:            border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease);
    flex:                  1;
}

.yvr-card--side:hover {
    border-color: #d1d5db;
    box-shadow:   var(--shadow-sm);
    transform:    translateY( -1px );
}

.yvr-card--side .yvr-card__image {
    aspect-ratio: 1 / 1;
    height:       100%;
    border-radius: 0;
}

.yvr-card--side .yvr-card__body {
    padding: 0.95rem 1.1rem 0.95rem 0;
    gap:     0.4rem;
}

.yvr-card--side .yvr-card__meta { gap: 4px; }

.yvr-card--side .yvr-card__title {
    font-size:      1rem;
    line-height:    1.3;
    letter-spacing: -0.2px;
}

.yvr-card--side .yvr-card__excerpt {
    display: none;
}

.yvr-card--side .yvr-card__date {
    font-size: 0.66rem;
}

/* Sample badge on feature card */
.yvr-card--feature.yvr-card--sample::before,
.yvr-card--side.yvr-card--sample::before {
    top:   12px;
    right: 12px;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.yvr-btn {
    display:         inline-block;
    padding:         0.8em 1.7em;
    border-radius:   var(--r);
    font-weight:     800;
    font-size:       0.82rem;
    font-family:     var(--font);
    cursor:          pointer;
    text-decoration: none;
    border:          2px solid transparent;
    transition:      background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.15s var(--ease);
    white-space:     nowrap;
    line-height:     1.4;
    letter-spacing:  0.02em;
}

.yvr-btn:hover { transform: translateY( -1px ); }
.yvr-btn:active { transform: translateY( 0 ); }

.yvr-btn--primary {
    background:   var(--red);
    color:        var(--white);
    border-color: var(--red);
}
.yvr-btn--primary:hover {
    background:   var(--red-dark);
    border-color: var(--red-dark);
    color:        var(--white);
}

.yvr-btn--ghost {
    background:   transparent;
    color:        #ccc;
    border-color: #444;
}
.yvr-btn--ghost:hover {
    border-color: #888;
    color:        var(--white);
}

.yvr-btn--white {
    background:   var(--white);
    color:        var(--ink);
    border-color: var(--white);
}
.yvr-btn--white:hover {
    background:   #efefef;
}

/* ==========================================================================
   ARTICLE CARD GRID
   ========================================================================== */

.yvr-grid {
    display: grid;
    gap:     1.75rem;
}

.yvr-grid--3 { grid-template-columns: repeat( 3, 1fr ); }
.yvr-grid--2 { grid-template-columns: repeat( 2, 1fr ); }

/* ==========================================================================
   ARTICLE CARD
   ========================================================================== */

.yvr-card {
    background:     var(--white);
    border:         1px solid var(--border);
    border-radius:  var(--r);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    transition:     transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
    position:       relative;
}

.yvr-card:hover {
    transform:    translateY( -2px );
    box-shadow:   var(--shadow);
    border-color: #d1d5db;
}

.yvr-section--gray .yvr-card {
    box-shadow: var(--shadow-sm);
}

/* Sample / placeholder card */
.yvr-card--sample::before {
    content:        'Sample';
    position:       absolute;
    top:            10px;
    right:          10px;
    z-index:        2;
    background:     rgba(31, 41, 51, 0.85);
    color:          #fff;
    font-size:      0.62rem;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding:        3px 8px;
    border-radius:  3px;
    pointer-events: none;
}

.yvr-card--sample {
    border-style: dashed;
    border-color: #d1d5db;
}

.yvr-card--sample .yvr-card__title a {
    pointer-events: none;
    cursor:         default;
}

/* Image */
.yvr-card__image {
    display:       block;
    overflow:      hidden;
    aspect-ratio:  16 / 10;
    background:    var(--bg);
    flex-shrink:   0;
}

.yvr-card__image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.4s var(--ease);
}

.yvr-card:hover .yvr-card__image img {
    transform: scale( 1.04 );
}

/* No-image placeholder */
.yvr-card__image--placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--bg);
    color:           var(--border);
    font-size:       2rem;
}

/* Branded SVG fallback for posts with no featured image */
.yvr-card__image--fallback { background: var(--ink); }
.yvr-card__image--fallback img { object-fit: cover; }

/* Body */
.yvr-card__body {
    padding:        1.25rem 1.35rem 1.4rem;
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            0.55rem;
}

.yvr-card__meta {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         5px;
}

.yvr-card__title {
    font-size:      1.15rem;
    font-weight:    800;
    line-height:    1.28;
    margin:         0;
    letter-spacing: -0.3px;
}

.yvr-card__title a {
    color:           var(--ink);
    text-decoration: none;
}

.yvr-card__title a:hover { color: var(--red); }

.yvr-card__excerpt {
    font-size:   0.9rem;
    color:       var(--body);
    line-height: 1.6;
    margin:      0;
    flex:        1;
}

.yvr-card__date {
    display:        block;
    font-size:      0.72rem;
    color:          var(--soft);
    margin-top:     0.4rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.yvr-card__footer {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-top:      0.25rem;
    padding-top:     0.6rem;
    border-top:      1px solid var(--border);
}

.yvr-card__read-more {
    font-size:   0.75rem;
    font-weight: 800;
    color:       var(--red);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
}

/* FEATURED / HERO CARD */
.yvr-card--hero {
    display:               grid;
    grid-template-columns: 1.7fr 1fr;
    border:                none;
    border-radius:         var(--r);
    overflow:              hidden;
    box-shadow:            0 2px 20px rgba( 0, 0, 0, 0.1 );
}

.yvr-card--hero .yvr-card__image {
    aspect-ratio: unset;
    min-height:   360px;
}

.yvr-card--hero .yvr-card__body {
    padding:        2rem 2rem 2rem;
    background:     var(--white);
    justify-content: center;
    gap:            0.75rem;
}

.yvr-card__title--hero {
    font-size:      1.55rem;
    letter-spacing: -0.4px;
    line-height:    1.2;
}

/* ==========================================================================
   HOMEPAGE — SECTION FEATURED
   ========================================================================== */

.yvr-section--featured {
    padding:    2.5rem 0;
    background: var(--white);
}

/* ==========================================================================
   HOMEPAGE — CITIES SECTION
   ========================================================================== */

.yvr-section--cities { background: var(--bg-warm); }

.yvr-section--cities .yvr-section-header {
    border-bottom-color: var(--ink);
}

.yvr-section--cities .yvr-section-header__title {
    color: var(--ink);
}

.yvr-cities {
    display:               grid;
    grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
    gap:                   0.85rem;
}

.yvr-city-pill {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.5rem;
    padding:         1em 1.2em;
    background:      var(--white);
    border:          1px solid var(--border);
    border-radius:   var(--r);
    font-size:       0.92rem;
    font-weight:     700;
    color:           var(--ink);
    text-decoration: none;
    letter-spacing:  -0.1px;
    transition:      transform 0.2s var(--ease), border-color 0.2s, color 0.2s, box-shadow 0.2s;
    white-space:     nowrap;
    min-height:      48px;
}

.yvr-city-pill:hover {
    background:   var(--white);
    border-color: var(--red);
    color:        var(--red);
    transform:    translateY( -1px );
    box-shadow:   var(--shadow-sm);
    text-decoration: none;
}

.yvr-city-pill::after {
    content:     '→';
    font-size:   0.9rem;
    color:       var(--soft);
    transition:  color 0.15s, transform 0.15s;
}

.yvr-city-pill:hover::after {
    color:     var(--red);
    transform: translateX( 2px );
}

.yvr-city-pill__count {
    font-size:     0.7rem;
    color:         var(--muted);
    background:    var(--bg);
    border-radius: 100px;
    padding:       1px 7px;
    font-weight:   700;
}

/* ==========================================================================
   NEWSLETTER CTA
   ========================================================================== */

.yvr-newsletter {
    background:    var(--ink);
    padding:       3.25rem 0 3rem;
    position:      relative;
    overflow:      hidden;
}

.yvr-newsletter--compact { padding: 2.5rem 0 2.5rem; }

.yvr-newsletter__text { flex: 1 1 360px; }

.yvr-newsletter__form {
    display:     flex;
    gap:         0.5rem;
    flex-wrap:   wrap;
    flex-shrink: 0;
}

.yvr-newsletter__input {
    background:    var(--white);
    border:        1px solid var(--white);
    border-radius: var(--r);
    color:         var(--ink);
    padding:       0.7rem 1rem;
    font-size:     0.95rem;
    min-width:     260px;
    font-family:   inherit;
}

.yvr-newsletter__input:focus {
    outline:    2px solid var(--red);
    outline-offset: 1px;
}

.yvr-newsletter::before {
    content:       '';
    position:      absolute;
    top:           0;
    left:          50%;
    transform:     translateX( -50% );
    width:         72px;
    height:        4px;
    background:    var(--red);
    border-radius: 0 0 4px 4px;
}

.yvr-newsletter__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             2.5rem;
    flex-wrap:       wrap;
    max-width:       1000px;
    margin:          0 auto;
}

.yvr-newsletter__eyebrow {
    display:        inline-block;
    font-size:      0.7rem;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color:          var(--red);
    margin-bottom:  0.7rem;
}

.yvr-newsletter__title {
    font-size:      clamp( 1.5rem, 3vw, 2rem );
    font-weight:    900;
    color:          var(--white);
    margin:         0 0 0.6rem;
    letter-spacing: -0.5px;
    line-height:    1.15;
}

.yvr-newsletter__desc {
    font-size:   0.98rem;
    color:       #cbd5e1;
    margin:      0;
    max-width:   520px;
    line-height: 1.65;
}

.yvr-newsletter__placeholder {
    font-size: 0.78rem;
    color:     #94a3b8;
    margin:    0 0 0.8rem;
    font-style: italic;
}

.yvr-newsletter__action { flex-shrink: 0; }

.yvr-btn--newsletter,
.yvr-btn--white {
    background:   var(--white);
    color:        var(--ink);
    border-color: var(--white);
    font-weight:  800;
}

.yvr-btn--newsletter:hover,
.yvr-btn--white:hover {
    background:   var(--red);
    border-color: var(--red);
    color:        var(--white);
}

/* ==========================================================================
   SINGLE POST
   ========================================================================== */

.yvr-single { padding-bottom: 5rem; }

.yvr-post-header {
    padding:       3rem 0 2rem;
}

.yvr-post-header__meta {
    display:       flex;
    flex-wrap:     wrap;
    align-items:   center;
    gap:           6px;
    margin-bottom: 1rem;
}

.yvr-post-header__title {
    font-size:      clamp( 1.8rem, 4vw, 2.6rem );
    font-weight:    900;
    line-height:    1.15;
    margin:         0 0 1rem;
    letter-spacing: -0.5px;
    color:          var(--ink);
}

.yvr-post-header__byline {
    font-size:  0.82rem;
    color:      var(--muted);
    display:    flex;
    align-items: center;
    gap:        0.75rem;
    flex-wrap:  wrap;
}

.yvr-post-header__byline time { font-weight: 600; }

.yvr-post-header__updated {
    color:       var(--muted);
    padding-left: 0.75rem;
    border-left: 1px solid var(--border);
}

/* Hero image */
.yvr-post-hero {
    margin:        0 0 2.5rem;
    border-radius: var(--r);
    overflow:      hidden;
    border:        1px solid var(--border);
}

.yvr-post-hero img {
    width:      100%;
    height:     auto;
    max-height: 560px;
    object-fit: cover;
    display:    block;
}

/* Article content */
.yvr-content {
    font-size:   1.02rem;
    line-height: 1.85;
    color:       var(--body);
}

.yvr-content > * + * { margin-top: 1.3em; }
.yvr-content p       { margin: 0 0 1.4em; }
.yvr-content p:last-child { margin-bottom: 0; }

.yvr-content h2 {
    font-size:      1.45rem;
    margin:         2.5em 0 0.6em;
    padding-bottom: 0.4em;
    border-bottom:  2px solid var(--border);
    letter-spacing: -0.3px;
}

.yvr-content h3 {
    font-size:  1.15rem;
    margin:     2em 0 0.5em;
}

.yvr-content ul,
.yvr-content ol {
    padding-left: 1.5em;
    margin:       0 0 1.4em;
}

.yvr-content li { margin-bottom: 0.4em; }

.yvr-content a {
    color:           var(--red);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.yvr-content blockquote {
    border-left: 4px solid var(--red);
    margin:      2em 0;
    padding:     1em 1.4em;
    background:  var(--red-light);
    border-radius: 0 var(--r) var(--r) 0;
    font-size:   1.05rem;
    color:       #444;
    font-style:  italic;
}

.yvr-content blockquote p { margin: 0; }

.yvr-content img {
    border-radius: var(--r);
    width:         100%;
    height:        auto;
    border:        1px solid var(--border);
}

/* Needs-verification callout */
.yvr-needs-verification {
    background:    #fffbeb;
    border-left:   4px solid #f59e0b;
    border-radius: 0 var(--r) var(--r) 0;
    padding:       0.9em 1.2em;
    font-size:     0.88rem;
    color:         #555;
    margin:        0 0 2rem;
    line-height:   1.6;
}

/* Key details box */
.yvr-key-details {
    background:    var(--bg);
    border:        1px solid var(--border);
    border-top:    3px solid var(--red);
    border-radius: var(--r);
    padding:       1.4rem 1.6rem;
    margin:        0 0 2.5rem;
}

.yvr-key-details__heading {
    font-size:      0.68rem;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--red);
    margin:         0 0 1rem;
}

.yvr-key-details__grid {
    display:               grid;
    grid-template-columns: repeat( 2, 1fr );
    gap:                   0.75rem 2rem;
    margin:                0;
}

.yvr-key-details__row { margin: 0; }

.yvr-key-details__row--full { grid-column: 1 / -1; }

.yvr-key-details__row dt {
    font-size:      0.68rem;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--muted);
    margin-bottom:  2px;
}

.yvr-key-details__row dd {
    font-size:  0.92rem;
    color:      var(--ink);
    margin:     0;
    font-weight: 600;
}

.yvr-key-details__row dd a {
    color:           var(--red);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Source link */
.yvr-source {
    font-size:   0.8rem;
    color:       var(--muted);
    border-top:  1px solid var(--border);
    padding-top: 1.2rem;
    margin-top:  2.5rem;
}

.yvr-source a { color: var(--muted); }
.yvr-source a:hover { color: var(--red); }

/* Social sharing */
.yvr-share {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    margin:      2rem 0 1.5rem;
    flex-wrap:   wrap;
}

.yvr-share__label {
    font-size:   0.72rem;
    font-weight: 700;
    color:       var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.yvr-share__btn {
    font-size:       0.75rem;
    font-weight:     700;
    padding:         0.4em 1em;
    border-radius:   var(--r);
    border:          1px solid var(--border);
    color:           var(--body);
    text-decoration: none;
    transition:      background 0.15s, color 0.15s;
    cursor:          pointer;
}

.yvr-share__btn:hover {
    background:      var(--ink);
    border-color:    var(--ink);
    color:           var(--white);
    text-decoration: none;
}

/* Post footer */
.yvr-post-footer {
    margin-top:  2rem;
    padding-top: 1.5rem;
    border-top:  1px solid var(--border);
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         0.5rem;
}

.yvr-post-footer__label {
    font-size:   0.72rem;
    font-weight: 700;
    color:       var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   RELATED POSTS
   ========================================================================== */

.yvr-related {
    padding:    3rem 0 2rem;
    border-top: 2px solid var(--border);
    margin-top: 3rem;
}

.yvr-related__title {
    font-size:      1.15rem;
    font-weight:    900;
    margin:         0 0 1.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size:      0.85rem;
    color:          var(--muted);
}

/* ==========================================================================
   ARCHIVE PAGES
   ========================================================================== */

.yvr-archive { padding-bottom: 4rem; }

.yvr-archive-header {
    padding:       2.5rem 0 2rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2.5rem;
    position:      relative;
}

.yvr-archive-header::after {
    content:    '';
    position:   absolute;
    bottom:     -1px;
    left:       0;
    width:      72px;
    height:     3px;
    background: var(--red);
}

.yvr-archive-header__title {
    font-size:      clamp( 1.6rem, 3vw, 2.2rem );
    font-weight:    900;
    margin:         0 0 0.5rem;
    letter-spacing: -0.5px;
}

.yvr-archive-header__desc,
.yvr-archive-header__meta {
    font-size: 0.95rem;
    color:     var(--muted);
    margin:    0.5rem 0 0;
}

/* Pagination */
.yvr-pagination {
    margin-top:  3rem;
    padding-top: 2rem;
    border-top:  1px solid var(--border);
    text-align:  center;
}

.yvr-pagination .nav-links {
    display:         flex;
    gap:             0.4rem;
    justify-content: center;
    flex-wrap:       wrap;
}

.yvr-pagination .page-numbers {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       38px;
    height:          38px;
    padding:         0 0.6em;
    border:          1px solid var(--border);
    border-radius:   var(--r);
    font-size:       0.85rem;
    font-weight:     700;
    color:           var(--body);
    text-decoration: none;
    transition:      background 0.15s, color 0.15s, border-color 0.15s;
}

.yvr-pagination .page-numbers.current,
.yvr-pagination .page-numbers:hover {
    background:      var(--red);
    border-color:    var(--red);
    color:           var(--white);
}

/* Empty states */
.yvr-empty,
.yvr-empty-state {
    text-align:  center;
    color:       var(--muted);
    font-size:   0.95rem;
    padding:     4rem 1rem;
}

.yvr-empty-state .yvr-btn { margin-top: 1rem; }

/* ==========================================================================
   SITE FOOTER
   ========================================================================== */

.yvr-site-footer {
    background: var(--footer-bg);
    color:      #94a3b8;
    margin-top: auto;
}

.yvr-footer__top {
    padding:       4rem 0 3rem;
    border-bottom: 1px solid var(--footer-deep);
}

.yvr-footer__grid {
    display:               grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
    gap:                   3rem;
    align-items:           start;
}

.yvr-footer__logo {
    display:         block;
    font-size:       1.85rem;
    font-weight:     900;
    color:           var(--white);
    letter-spacing:  -1.2px;
    text-decoration: none;
    margin-bottom:   1.1rem;
    line-height:     1;
}

.yvr-footer__logo:hover { color: var(--white); opacity: 0.85; }

.yvr-footer__about {
    font-size:   0.86rem;
    color:       #cbd5e1;
    line-height: 1.7;
    margin:      0 0 1.4rem;
    max-width:   320px;
}

.yvr-footer__social {
    display:   flex;
    gap:       0.5rem;
    flex-wrap: wrap;
}

.yvr-footer__social-link {
    font-size:       0.7rem;
    font-weight:     700;
    color:           #cbd5e1;
    border:          1px solid var(--footer-deep);
    background:      var(--footer-deep);
    padding:         0.5em 0.95em;
    border-radius:   var(--r);
    text-decoration: none;
    text-transform:  uppercase;
    letter-spacing:  0.08em;
    transition:      color 0.15s, border-color 0.15s, background 0.15s;
    cursor:          default;
    position:        relative;
}

.yvr-footer__social-link[aria-disabled="true"]::after {
    content:        '·';
    display:        inline-block;
    margin-left:    6px;
    color:          var(--red);
    font-weight:    900;
}

.yvr-footer__social-link[aria-disabled="true"] {
    pointer-events: none;
    opacity:        0.75;
}

.yvr-footer__social-link:hover {
    color:        var(--white);
    border-color: var(--red);
}

.yvr-footer__col-title {
    font-size:      0.7rem;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color:          var(--white);
    margin:         0 0 1.1rem;
    padding-bottom: 0;
    border-bottom:  none;
}

.yvr-footer__col-title--sub { margin-top: 1.6rem; }

.yvr-footer__links {
    list-style: none;
    margin:     0;
    padding:    0;
}

.yvr-footer__links li { margin-bottom: 0.55rem; }

.yvr-footer__links a {
    font-size:       0.88rem;
    color:           #cbd5e1;
    text-decoration: none;
    transition:      color 0.15s, padding-left 0.15s var(--ease);
    line-height:     1.5;
    display:         inline-block;
}

.yvr-footer__links a:hover {
    color:        var(--white);
    padding-left: 4px;
}

.yvr-footer__bottom {
    padding:    1.4rem 0;
    background: var(--footer-deep);
}

.yvr-footer__bottom-inner {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             1rem;
    flex-wrap:       wrap;
}

.yvr-footer__copy,
.yvr-footer__built {
    font-size: 0.78rem;
    color:     #94a3b8;
    margin:    0;
}

.yvr-footer__built { text-align: right; }

/* ==========================================================================
   STATIC / LEGAL PAGES
   ========================================================================== */

.yvr-main--page { padding: 3rem 0 5rem; }

.yvr-page__header { margin-bottom: 2rem; }

.yvr-page__title {
    font-size:      clamp( 1.8rem, 3.5vw, 2.6rem );
    font-weight:    900;
    letter-spacing: -0.5px;
    margin:         0 0 0.25rem;
    color:          var(--ink);
}

.yvr-page__hero {
    margin:        0 0 2.5rem;
    border-radius: var(--r);
    overflow:      hidden;
    border:        1px solid var(--border);
}

.yvr-page__hero-img {
    width:      100%;
    height:     auto;
    max-height: 480px;
    object-fit: cover;
}

.yvr-page__content,
.page .yvr-content { max-width: 680px; }

/* ==========================================================================
   WORDPRESS SEARCH FORM (override defaults)
   ========================================================================== */

.search-form { display: flex; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media ( max-width: 1024px ) {

    .yvr-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .yvr-footer__col--brand { grid-column: 1 / -1; }
}

@media ( max-width: 900px ) {

    .yvr-grid--3 { grid-template-columns: repeat( 2, 1fr ); }

    .yvr-card--hero {
        grid-template-columns: 1fr;
    }

    .yvr-card--hero .yvr-card__image {
        min-height: 240px;
        aspect-ratio: 16 / 9;
    }

    .yvr-edhero__inner {
        grid-template-columns: 1fr;
        gap:                   1.25rem;
    }

    .yvr-edhero__side {
        display:               grid;
        grid-template-columns: 1fr 1fr;
        gap:                   0.9rem;
    }

    .yvr-newsletter__inner {
        flex-direction: column;
        text-align:     center;
    }

    .yvr-masthead__actions .search-field { width: 160px; }
}

@media ( max-width: 768px ) {

    /* Mobile nav */
    .yvr-nav__toggle { display: flex; }

    .yvr-nav__menu-wrap {
        display:    none;
        position:   absolute;
        top:        100%;
        left:       0;
        right:      0;
        background: var(--nav-bg);
        border-top: 1px solid #222;
        z-index:    200;
        padding:    0.5rem 0;
        box-shadow: 0 8px 20px rgba( 0, 0, 0, 0.4 );
    }

    .yvr-nav__menu-wrap.is-open { display: block; }

    .yvr-nav__menu {
        flex-direction: column;
    }

    .yvr-nav__menu > li > a {
        padding:      0.85rem 1.5rem;
        border-bottom: 1px solid #1f1f1f;
        border-left:  none;
    }

    .yvr-nav__menu > li > a:hover {
        border-bottom-color: #1f1f1f;
        background: #1a1a1a;
    }

    /* Masthead */
    .yvr-masthead__inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .yvr-masthead__actions .search-field { width: 100%; }
    .yvr-masthead__actions { width: 100%; }
    .yvr-masthead__actions .search-form { width: 100%; }
}

@media ( max-width: 600px ) {

    .yvr-grid--3,
    .yvr-grid--2 { grid-template-columns: 1fr; }

    .yvr-hero { padding: 3rem 0 2.5rem; }

    .yvr-hero__ctas {
        flex-direction: column;
        align-items:    flex-start;
    }

    .yvr-btn { width: auto; }

    .yvr-edhero { padding: 1.5rem 0 2rem; }

    .yvr-edhero__side {
        grid-template-columns: 1fr;
    }

    .yvr-card--side {
        grid-template-columns: 90px 1fr;
    }

    .yvr-card--feature .yvr-card__body { padding: 1.25rem 1.25rem 1.4rem; }

    .yvr-footer__grid {
        grid-template-columns: 1fr;
    }

    .yvr-footer__bottom-inner {
        flex-direction: column;
        text-align:     center;
    }

    .yvr-footer__built { text-align: center; }

    .yvr-key-details__grid { grid-template-columns: 1fr; }

    .yvr-section-header { flex-direction: column; align-items: flex-start; gap: 0.4rem; }

    .yvr-topbar__date { display: none; }
}

/* ==========================================================================
   UTILITY
   ========================================================================== */

.screen-reader-text,
.sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect( 0, 0, 0, 0 );
    white-space: nowrap;
    border:     0;
}

/* ==============================================
   YVRBlog Mobile Readability Fixes
   Safe layout/readability changes only
   ============================================== */

/* Images: responsive and remove inline image gap */
.entry-content img,
.wp-block-image img,
.wp-post-image,
.attachment-post-thumbnail {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Mobile typography */
@media (max-width: 768px) {
  .entry-content p,
  .entry-content li {
    font-size: 17px;
    line-height: 1.65;
  }

  .entry-content h3 {
    margin-top: 1.75em;
    margin-bottom: 0.45em;
  }
}

/* Mobile tables: allow horizontal scroll instead of breaking page */
@media (max-width: 768px) {
  .entry-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 14px;
    border-collapse: collapse;
  }

  .entry-content table th,
  .entry-content table td {
    min-width: 120px;
    white-space: normal;
    vertical-align: top;
  }
}

/* Footer links: improve mobile tap targets */
@media (max-width: 768px) {
  .site-footer a,
  footer a {
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 8px;
    min-height: 44px;
    line-height: 1.4;
  }
}

/* ==========================================================================
   SEARCH RESULTS — uniform card images
   Scope: body.search-results only. Does NOT affect single posts, homepage,
   category pages, or any other context.
   ========================================================================== */

body.search-results .post-image {
    overflow: hidden;
}

body.search-results .post-image a {
    display: block;
    line-height: 0;
}

body.search-results .post-image img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

@media ( max-width: 768px ) {
    body.search-results .post-image img {
        height: 200px;
    }
}