/*
Theme Name: Diary of a Londoness
Theme URI: https://www.diaryofalondoness.com
Author: Scarlett Roitman
Description: A bright, bookish theme for Diary of a Londoness, with a London and Lisbon menu, sections on the homepage and clean story pages.
Version: 1.4.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: diary-of-a-londoness
*/

:root { --paper:#F8FBFB; --wash:#E3F3F2; --line:#C9DEDD; --ink:#0E1718; --ink-2:#455759; --aqua:#8FD0CC; --teal:#1D7478; --red:#D8222E; --sec:clamp(28px,4vw,48px); --gap:clamp(20px,3vw,40px); }
html { scroll-padding-top: 72px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks { padding-left: 0; padding-right: 0; }
main.wp-block-group { margin-top: 0; }

/* Header and menu */
header.wp-block-template-part { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); }
.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 46px; } }
.site-bar { padding: 0 16px; }
.site-bar__in { min-height: 60px; gap: 24px; }
.site-bar .wp-block-site-title { margin: 0; font: 500 12px/1 var(--wp--preset--font-family--sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.site-bar .wp-block-site-title a { color: var(--ink); text-decoration: none; }
.main-nav { font: 500 12px/1 var(--wp--preset--font-family--sans); letter-spacing: .16em; text-transform: uppercase; }
.main-nav a { text-decoration: none; color: var(--ink); }
.main-nav .wp-block-navigation__container { gap: clamp(20px, 3vw, 38px); }
.main-nav .wp-block-navigation-item > a:hover, .main-nav .wp-block-navigation-item > .wp-block-navigation-item__content:hover { color: var(--teal); }
.main-nav .wp-block-navigation__submenu-container { min-width: 230px; padding: 10px 0; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 14px 30px -18px rgba(14,23,24,.35); }
.main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 11px 18px; font-size: 12px; letter-spacing: .14em; white-space: nowrap; }
.main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wash); }
.main-nav .current-menu-item > a, .main-nav .current-menu-ancestor > a { border-bottom: 2px solid var(--red); padding-bottom: 4px; }

/* Masthead */
.masthead { text-align: center; background: var(--wash); padding: clamp(24px,4vw,48px) 16px clamp(32px,4.5vw,56px); }
.masthead .wp-block-image img { mix-blend-mode: multiply; width: min(100%, 760px); height: auto; margin-inline: auto; }
.masthead h1 { margin: clamp(20px,3vw,32px) auto 0; max-width: 20ch; font-style: italic; font-weight: 400; font-size: clamp(1.7rem,4vw,2.7rem); line-height: 1.15; text-wrap: balance; }
.masthead .intro { margin: 18px auto 0; max-width: 58ch; color: var(--ink-2); font-size: 1.05rem; }

/* Bands and section heads */
.band { padding: var(--sec) 16px; }
.band--wash { background: var(--wash); }
.band--sky { padding-bottom: 0; }
.sec-head { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 14px var(--gap); align-items: end; margin-bottom: clamp(20px,3vw,32px); }
.sec-head > * { margin: 0; }
.sec-head h2 em { font-style: italic; color: var(--teal); }
.sec-head h2 { font-size: clamp(2.5rem,6.5vw,4.8rem); line-height: 1; letter-spacing: -.015em; text-wrap: balance; }
.kicker { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--wp--preset--font-family--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.kicker::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--aqua); }
.lede { max-width: 38ch; color: var(--ink-2); font-size: 1.05rem; }
.more a, a.more { display: inline-flex; font: 500 12px/1 var(--wp--preset--font-family--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--ink); padding: 14px 0 10px; border-bottom: 2px solid var(--red); }
.more { margin-top: clamp(28px,4vw,44px); }
.more a:hover, a.more:hover { color: var(--teal); }
.status { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 0; font: 500 11px/1 var(--wp--preset--font-family--sans); letter-spacing: .2em; text-transform: uppercase; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.lisbon-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(36px,6vw,80px) var(--gap); }
.lisbon-pair > * { margin: 0; }
.lisbon-pair .lede { max-width: 52ch; margin-top: 14px; }
.lisbon-pair h2 { font-size: clamp(2.2rem,4.6vw,3.6rem); line-height: 1; margin: 14px 0 0; }
.lisbon-pair h2 em { font-style: italic; color: var(--teal); }
.skyline { margin: clamp(28px,5vw,52px) 0 0; line-height: 0; }
.skyline img { width: 100%; height: auto; }

/* Cards */
.card-grid .wp-block-post-template { gap: clamp(24px,3vw,36px) var(--gap); }
.card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card .wp-block-post-featured-image { margin: 0; overflow: hidden; background: var(--line); }
.card .wp-block-post-featured-image img { transition: transform .5s ease; }
.card:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.card__meta { margin: 0; font: 500 11px/1 var(--wp--preset--font-family--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.card__meta a { color: var(--red); text-decoration: none; }
.card__title { margin: 0; text-wrap: balance; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a:hover { color: var(--teal); }
.card__desc { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.card__desc p { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Story pages */
.story { padding: clamp(32px,5vw,56px) 16px var(--sec); }
.story .wp-block-post-terms { font: 500 12px/1 var(--wp--preset--font-family--sans); letter-spacing: .2em; text-transform: uppercase; margin: 0 0 18px; }
.story .wp-block-post-terms a { color: var(--red); text-decoration: none; }
.story .wp-block-post-title { margin: 0 0 clamp(20px,3vw,32px); font-size: clamp(2.2rem,6vw,4rem); line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
.story .wp-block-post-content > * + * { margin-block-start: 1.1em; }
.story .wp-block-post-content figure { margin-block: 1.8em; }
.story .wp-block-post-content figcaption { font-size: 14px; color: var(--ink-2); }
.story .wp-block-post-content a { text-underline-offset: 3px; }
.story .wp-block-post-content h2 { font-size: clamp(1.7rem,3.2vw,2.3rem); margin-top: 1.8em; }
.story .wp-block-post-content h3 { margin-top: 1.5em; }
.more-stories { padding: clamp(36px,6vw,64px) 16px; background: var(--wash); }
.more-stories h2 { margin: 0 0 8px; font-size: clamp(1.8rem,4vw,2.6rem); }
.more-stories p { margin: 0; color: var(--ink-2); }

/* Section (category) pages */
.page-head { padding: clamp(32px,5vw,56px) 16px 0; }
.page-head h1 { margin: 0; font-size: clamp(2.8rem,8vw,6rem); line-height: 1; letter-spacing: -.015em; }
.page-head .wp-block-term-description { margin: 20px 0 0; max-width: 62ch; color: var(--ink-2); font-size: 1.05rem; }
.page-head .wp-block-term-description p { margin: 0; }
.page-body { padding: clamp(32px,5vw,56px) 16px var(--sec); }
.wp-block-query-pagination { margin-top: clamp(32px,5vw,56px); font: 500 12px/1 var(--wp--preset--font-family--sans); letter-spacing: .16em; text-transform: uppercase; }
.wp-block-query-pagination a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: 6px; }
.no-posts { font: italic 400 1.5rem/1.3 var(--wp--preset--font-family--display); color: var(--ink-2); }

/* About page */
.about-page { padding: clamp(36px,6vw,72px) 16px var(--sec); }
.about-page .wp-block-post-title { margin: 0 0 24px; font-size: clamp(2.8rem,8vw,5.5rem); line-height: 1; }
.about-page .wp-block-post-content > * + * { margin-block-start: 1.1em; }
.about-page .wp-block-post-content p:first-child { font-size: clamp(1.15rem,2vw,1.35rem); line-height: 1.5; }
.about-page .wp-block-image img { width: 100%; height: auto; aspect-ratio: 8 / 9; object-fit: cover; object-position: 50% 40%; }

/* Homepage city rows */
.city-row .wp-block-columns { gap: clamp(24px,5vw,64px); margin: 0; }
.city-row .wp-block-image { margin: 0; }
.city-row .wp-block-image img { width: 100%; height: auto; }
.city-row .kicker { margin-bottom: 14px; }
.city-row h2 { margin: 0 0 14px; font-size: clamp(2rem,4.4vw,3.3rem); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; }
.city-row h2 em { font-style: italic; color: var(--teal); }
.city-row .wp-block-image img { max-width: 100%; }
.city-row .lede { max-width: 46ch; }
.city-links { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 22px 0 0; }
.city-links a, .about-links a { display: inline-flex; font: 500 12px/1 var(--wp--preset--font-family--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--ink); padding: 12px 0 9px; border-bottom: 2px solid var(--red); }
.city-links a:hover, .about-links a:hover { color: var(--teal); }
.about-links { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 2em; }

/* Footer */
footer.wp-block-template-part { margin-top: 0; }
.site-foot { background: var(--paper); border-top: 1px solid var(--line); color: var(--ink); padding: clamp(40px,6vw,64px) 16px clamp(24px,3vw,32px); }
.foot__grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.2fr); gap: clamp(28px,5vw,64px); align-items: start; }
.foot__grid > * { margin: 0; }
.foot__badge { margin: 0 0 18px; }
.foot__badge img { width: 170px; height: auto; display: block; }
.foot__tag { margin: 0 0 16px; max-width: 32ch; font: italic 400 1.25rem/1.3 var(--wp--preset--font-family--display); }
.foot__icons { display: flex; gap: 18px; margin: 0; }
.foot__icons a { display: inline-flex; color: var(--ink); }
.foot__icons a:hover { color: var(--teal); }
.foot__h { margin: 0 0 16px; font: 500 12px/1 var(--wp--preset--font-family--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.foot__links { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.site-foot a { color: var(--ink); text-decoration: none; }
.foot__links a:hover, .foot__col a:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.foot__col p { margin: 0 0 10px; }
.foot__legal { margin-top: clamp(32px,5vw,56px); padding-top: 20px; border-top: 1px solid var(--line); }
.foot__legal p { margin: 0 0 4px; font-size: 13px; color: var(--ink-2); }

@media (max-width: 900px) { .sec-head { grid-template-columns: minmax(0,1fr); } .foot__grid { grid-template-columns: minmax(0,1fr); } }

/* Cards with no photo yet */
.card:not(:has(img))::before { content: "Diary of a Londoness"; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--wash); border: 1px dashed var(--aqua); font: italic 400 1.3rem/1.2 var(--wp--preset--font-family--display); color: var(--ink-2); text-align: center; }
.band--wash .card:not(:has(img))::before { background: var(--paper); }
.band > .more { max-width: var(--wp--style--global--wide-size, 1180px); margin-left: auto; margin-right: auto; }

.nowrap { white-space: nowrap; }
@media (max-width: 781px) { .band:not(.city-row) .wp-block-columns .wp-block-image { max-width: 240px; } .about-page .wp-block-image { max-width: 320px; } }

/* Header search icon */
.nav-search .wp-block-search__inside-wrapper { border: 0; padding: 0; background: transparent; }
.nav-search .wp-block-search__button { background: transparent; color: var(--ink); border: 0; padding: 6px; margin: 0; line-height: 0; cursor: pointer; }
.nav-search .wp-block-search__button:hover { color: var(--teal); }
.nav-search .wp-block-search__button svg { width: 22px; height: 22px; fill: currentColor; }
.nav-search .wp-block-search__input { border: 1px solid var(--line); background: var(--paper); font-family: inherit; padding: 8px 12px; }
.nav-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper { min-width: 0; }

/* v1.2.1: tighter gap between a photo and the heading after it */
.story .wp-block-post-content h2 { margin-top: 1.4em; }
.story .wp-block-post-content figure + h2,
.story .wp-block-post-content figure + .wp-block-heading { margin-top: .5em; }
.story .wp-block-post-content figure { margin-block: 1.4em; }
.story .wp-block-post-content figure + figure { margin-top: 0; }

/* v1.2.2: always centre images and their captions in posts */
.story .wp-block-post-content .wp-block-image { text-align: center; margin-inline: auto; }
.story .wp-block-post-content .wp-block-image img { display: block; margin-inline: auto; max-width: 100%; height: auto; }
.story .wp-block-post-content .wp-block-image.alignleft,
.story .wp-block-post-content .wp-block-image.alignright { float: none; margin-inline: auto; }
.story .wp-block-post-content figcaption { text-align: center; }

/* Love letter band */
.love-letter { text-align: center; }
.love-letter .kicker { justify-content: center; }
.love-letter h2 { margin: 14px auto 0; font-size: clamp(2.2rem,5.5vw,4rem); line-height: 1.05; text-wrap: balance; }
.love-letter h2 em { font-style: italic; color: var(--teal); }
.love-letter__text { max-width: 52ch; margin: 22px auto 0; font-style: italic; font-size: clamp(1.15rem,2.2vw,1.45rem); line-height: 1.5; color: var(--ink-2); }
.love-letter .more { text-align: center; }