/*
Theme Name: Cardoso
Theme URI: https://www.brunocardoso.eu
Author: Bruno Cardoso
Description: Personal block theme for brunocardoso.eu. Cobalt azulejo hero, generative tile band, editorial serif headlines, self-hosted fonts.
Version: 1.1.1
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cardoso
*/

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:10}
.site-header a{text-decoration:none}
.site-header .wp-block-navigation a{color:rgba(250,247,240,.85);font-weight:600;padding-bottom:2px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.site-header .wp-block-navigation a:hover{color:#fff;border-color:#2D6BB5}

/* ---------- hero ---------- */
.hero h1{letter-spacing:-.01em;line-height:1.04;max-width:19ch}
.hero h1 em{font-style:italic;color:#BAD5F5}
.kicker{font-size:.85rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#9FC0E8}
.lede{max-width:56ch;color:#D9E4F2}
.btn-ghost .wp-block-button__link{background:transparent;border:2px solid rgba(250,247,240,.5);color:#FAF7F0}
.btn-ghost .wp-block-button__link:hover{background:transparent;border-color:#fff;color:#fff}

/* ---------- azulejo band (signature) ----------
   Edit or remove: the band is the "Azulejo band" HTML block in the
   Front Page template; motifs live in assets/theme.js               */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));background:#0A2A54;min-height:36px}
.tiles svg{display:block;width:100%;height:auto;background:#EFE9DB;transition:filter .25s}
.tiles svg:hover{filter:invert(1) hue-rotate(180deg)}
.tiles svg *{fill:#123F78}
.tiles svg .l{fill:none;stroke:#123F78;stroke-width:6}

/* ---------- eyebrow ---------- */
.eyebrow{display:flex;align-items:center;gap:.9rem;font-size:.85rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#5A6472}
.eyebrow::after{content:"";flex:1;height:1px;background:#E2DCCE}
.on-dark .eyebrow{color:#9AA6B5}
.on-dark .eyebrow::after{background:#2C3949}

/* ---------- strand cards ---------- */
.strand-card{background:#fff;border:1px solid #E2DCCE;border-top:6px solid #123F78;padding:2rem 1.8rem 2.1rem;transition:transform .2s,box-shadow .2s}
.strand-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(10,42,84,.10)}
.strand-card h3{margin-top:.4rem}
.strand-card p{color:#5A6472}
.strand-card .more{font-weight:700;font-size:.95rem;color:#123F78;text-decoration:none}
.strand-card .more:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- writing (dark) ---------- */
.on-dark .intro{max-width:60ch;color:#B9C3CF}
.on-dark .intro a{color:#BAD5F5}
.writing-row{border-bottom:1px solid #2C3949;padding:1.4rem 0;transition:padding-left .2s}
.writing-row:first-of-type{border-top:1px solid #2C3949}
.writing-row:hover{padding-left:.8rem}
.writing-row a{text-decoration:none;color:inherit;transition:color .2s}
.writing-row:hover a{color:#BAD5F5}
.writing-row .wp-block-post-date{color:#8792A1}

/* light variant on archive pages */
.on-light .writing-row{border-color:#E2DCCE}
.on-light .writing-row:first-of-type{border-color:#E2DCCE}
.on-light .writing-row:hover a{color:#123F78}

/* ---------- footer ---------- */
.site-footer a{color:#D9E4F2}
.site-footer a:hover{text-decoration:underline;text-underline-offset:3px}
.site-footer .meta{font-size:.95rem;color:#9FC0E8;border-top:1px solid rgba(250,247,240,.15)}

/* ---------- reveal (JS adds .rv, then .in) ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

/* ---------- misc ---------- */
.wp-block-post-content a{text-underline-offset:3px}
a:focus-visible,button:focus-visible,.wp-element-button:focus-visible{outline:3px solid #2D6BB5;outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .strand-card,.writing-row,.tiles svg{transition:none}
}