/* ianmclarenwallace.com: backend/public/css/site.css */
/* ---------- Tokens: light (default) and dark ---------- */
:root {
  --accent: #2bb3a8;
  --accent-dark: #0b5f58;
  --btn: #0f766e;
  --bg: #ffffff;
  --band: #f2f7f7;
  --dark-section: #0f1c1e;
  --text: #000000;
  --link: #0b6b64;
  --card: #ffffff;
  --card-text: #000000;
  --line: rgba(0, 0, 0, .15);
  --nav-bg: #ffffff;
  --nav-text: #000000;
  --shadow: 0 10px 30px rgba(0, 0, 0, .15);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0b1618;
  --band: #10242a;
  --dark-section: #061012;
  --text: #f4f4fa;
  --link: #6ee7d8;
  --card: #15303a;
  --card-text: #f4f4fa;
  --line: rgba(255, 255, 255, .18);
  --nav-bg: #0b1618;
  --nav-text: #f4f4fa;
  --shadow: 0 10px 30px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* ---------- Base: solid text, regular weight ---------- */
body, .wrapper { background: var(--bg); color: var(--text); }
.section:not(.section-dark):not(.newsletter-band) { background-color: var(--bg); }
a { color: var(--link); }
.section:not(.section-dark) p, .section:not(.section-dark) h1, .section:not(.section-dark) h2,
.section:not(.section-dark) h3, .section:not(.section-dark) h4, .section:not(.section-dark) h5,
.section:not(.section-dark) h6, .section:not(.section-dark) .card-description,
.section:not(.section-dark) .text-muted, .article, .article p { color: var(--text) !important; }
.section:not(.section-dark) h5, .section:not(.section-dark) h2.title, .section:not(.section-dark) h4,
.lead-p, .article p, .card-description { font-weight: 400; }
.section-dark { background-color: var(--dark-section); }
.section-dark, .section-dark p, .section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4,
.section-dark h5, .section-dark .lead-p, .section-dark .card-description, .section-dark .cred-list { color: #fff !important; }
.lead-p { font-size: 1.1rem; line-height: 1.8; }
h1.title, h2.title { text-wrap: balance; }

/* ---------- Navbar and theme switch ---------- */
.navbar, .navbar.navbar-transparent { padding-top: 0; padding-bottom: 0; }
.navbar .navbar-brand { padding: .9rem 0; margin: 0; }
.navbar .navbar-toggler { margin: 0; }
@media (max-width: 991px) { .navbar .navbar-brand { padding-left: 13px; } }
@media (min-width: 992px) {
  .navbar .navbar-nav { align-items: center; }
  .navbar .navbar-nav .nav-item .btn { margin: 0 0 0 .25rem; }
}
.navbar .navbar-nav .nav-item .nav-link:not(.btn) { margin-top: 0; margin-bottom: 0; padding-top: .9rem; padding-bottom: .9rem; }
.navbar:not(.navbar-transparent) { background: var(--nav-bg); }
.navbar:not(.navbar-transparent) .navbar-brand,
.navbar:not(.navbar-transparent) .navbar-nav .nav-item .nav-link:not(.btn) { color: var(--nav-text) !important; }
.navbar:not(.navbar-transparent) .navbar-toggler .navbar-toggler-bar { background: var(--nav-text); }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0 .25rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: inherit;
}
.theme-toggle:hover, .theme-toggle:focus-visible { background: rgba(43, 179, 168, .25); outline: none; }
.theme-toggle svg { width: 20px; height: 20px; fill: currentColor; }
.navbar.navbar-transparent .theme-toggle { color: #fff; }
.navbar:not(.navbar-transparent) .theme-toggle { color: var(--nav-text); }
.navbar-nav .nav-item:has(> .theme-toggle) { display: flex; align-items: center; }
.theme-toggle .ic-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: none; }

@media (max-width: 991px) {
  .navbar .navbar-collapse { background: var(--nav-bg) !important; }
  .navbar .navbar-collapse::after, .navbar .navbar-collapse:after { background-color: var(--nav-bg) !important; }
  .navbar .navbar-collapse .navbar-nav .nav-item .nav-link:not(.btn) { color: var(--nav-text) !important; opacity: 1; font-weight: 700; }
  .navbar .navbar-collapse .theme-toggle { color: var(--nav-text) !important; margin: .5rem 0; }
}

/* ---------- Buttons ---------- */
.btn-danger, .btn-danger:focus { background-color: var(--btn); border-color: var(--btn); color: #fff; }
.btn-danger:hover, .btn-danger:active, .btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled):active:focus, .show > .btn-danger.dropdown-toggle {
  background-color: var(--accent-dark) !important; border-color: var(--accent-dark) !important; color: #fff !important;
}
.btn-outline-default { color: var(--card-text); border-color: var(--card-text); }
.btn-outline-default:hover { color: #fff; background: var(--accent-dark); border-color: var(--accent-dark); }
.form-control { background: var(--card); color: var(--card-text); border-color: var(--line); }
.form-control::placeholder { color: var(--card-text); opacity: .6; }
.form-control:focus { border-color: var(--accent); }

/* ---------- Hero ---------- */
.page-header.hero-night .filter::after { background-color: transparent; }
.page-header .motto .btn { margin-top: 1.4rem; }

/* ---------- Cards and sections ---------- */
.newsletter-band { background: var(--band); }
.newsletter-band .form-control { border-radius: 30px; }
.book-card { background: var(--card); border-radius: 12px; overflow: hidden; margin-bottom: 1.5rem; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.book-card, .book-card p, .book-card h4, .book-card h6 { color: var(--card-text) !important; }
.row > [class*="col-"] > .book-card { height: calc(100% - 1.5rem); }
.book-card-body { padding: 1.4rem 1.4rem 1.6rem; flex: 1; }
.book-card-body h4 { margin: 0 0 .3rem; font-weight: 400; }
.book-card-body p { font-size: .95rem; margin: .6rem 0 1rem; font-weight: 400; }
.cred-list { list-style: none; padding: 0; margin: 0; }
.cred-list li { padding: .7rem 0; border-bottom: 1px solid var(--line); color: var(--text); }
.cred-list li:last-child { border-bottom: 0; }
.cred-list strong { display: block; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; margin-bottom: .15rem; }

/* ---------- Footer ---------- */
.footer .footer-nav a { color: rgba(255, 255, 255, .8); margin-right: 1.4rem; }
.footer .footer-nav a:hover { color: #fff; }
.footer .copyright, .footer .copyright a { color: rgba(255, 255, 255, .8); }

/* ---------- Hero (shown when there is no photograph) ---------- */
.page-header.hero-night {
  background:
    radial-gradient(ellipse at 50% 120%, #1f7a73 0%, transparent 60%),
    linear-gradient(180deg, #071a1c 0%, #0e3a3e 55%, #16595a 100%);
}

/* ---------- Pictures, articles, video (mclaren) ---------- */
.pic { background-size: cover; background-position: center; border-radius: 12px; box-shadow: var(--shadow); }
.pic-wide { aspect-ratio: 4 / 3; }
.pic-card { aspect-ratio: 16 / 10; margin-bottom: 1rem; }
.pic-portrait { aspect-ratio: 4 / 5; }
.pic-cover { aspect-ratio: 5 / 8; border-radius: 0; box-shadow: none; background-position: top center; }
.tagline { color: #fff; font-size: 1.25rem; letter-spacing: .02em; margin: 1rem 0 0; }
.article { font-size: 1.1rem; line-height: 1.9; }
.article .meta { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.video-frame { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.pic-thumb { aspect-ratio: 16 / 9; border-radius: 0; box-shadow: none; position: relative; }
.pic-thumb.is-video::after { content: ""; position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center / 60% no-repeat; }
.card-link, .card-link:hover { color: inherit; text-decoration: none; display: block; }
.guide-note { max-width: 640px; margin: 0 auto 2rem; }
.pager { text-align: center; margin-top: 1.5rem; }
.pager-count { margin: 0 .75rem; }
.audio-frame { margin: 1.5rem 0; } .audio-frame audio { width: 100%; }
.entry-media .video-frame { margin-bottom: 1rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 2rem; }
.gallery-item { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--band); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; z-index: 2000; flex-direction: column; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 82vh; border-radius: 6px; }
.lightbox .lb-caption { color: #fff; margin-top: .8rem; min-height: 1.4em; text-align: center; padding: 0 1rem; }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; padding: .5rem 1rem; }
.lightbox .lb-close { top: .5rem; right: .5rem; } .lightbox .lb-prev { left: .25rem; top: 50%; } .lightbox .lb-next { right: .25rem; top: 50%; }

/* ---------- Hero picture, size and legibility ---------- */
/* The shorthand above resets size and repeat, which made the picture tile. Set them explicitly. */
.page-header.hero-night {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 30%;
}
/* A soft dark pool behind the text so it reads on light pictures, plus a shadow on the letters. */
.page-header.hero-night .filter::after {
  background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .18) 55%, rgba(0, 0, 0, 0) 100%);
}
.page-header .motto .title {
  color: #fff;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .75), 0 3px 18px rgba(0, 0, 0, .6), 0 0 40px rgba(0, 0, 0, .45);
}
.page-header .motto .description {
  color: #fff;
  font-weight: 400;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 2px 12px rgba(0, 0, 0, .6), 0 0 28px rgba(0, 0, 0, .45);
}
.page-header .motto .tagline { font-weight: 400; text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 2px 12px rgba(0, 0, 0, .6); }
.navbar.navbar-transparent .navbar-brand,
.navbar.navbar-transparent .nav-link,
.navbar.navbar-transparent .navbar-toggler { text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 0 12px rgba(0, 0, 0, .5); }
.navbar.navbar-transparent .navbar-toggler-bar { box-shadow: 0 1px 3px rgba(0, 0, 0, .6); }

/* Every banner is 16:9, on phones and on every desktop width. The picture covers it, so nothing tiles or stretches. */
.page-header,
.page-header.page-header-small {
  aspect-ratio: 16 / 9;
  min-height: 0 !important;
  max-height: none !important;
  height: auto;
}
.page-header .content-center { padding: 0 1rem; }

/* Phones: a 16:9 banner is short, so the type and buttons are smaller to fit inside it. */
@media (max-width: 767px) {
  .page-header .motto .title { font-size: 1.5rem; line-height: 1.15; margin: 0 0 .3rem; }
  .page-header .motto .description { font-size: .95rem; margin: 0; }
  .page-header .motto .tagline { font-size: .85rem; margin: .4rem 0 0; }
  .page-header .motto .btn { margin-top: .6rem; padding: .35rem .9rem; font-size: .7rem; }
  .page-header.hero-night { background-position: center center; }
}

/* Less space between the bottom of the banner and the first line of text. */
.page-header + .wrapper > .section:first-child { padding-top: 32px; }
@media (max-width: 767px) { .page-header + .wrapper > .section:first-child { padding-top: 22px; } }

/* Category label above an article: darker, heavier, readable on light pages. */
.article .meta, .article .meta a { color: var(--link) !important; font-weight: 400; opacity: 1; }

/* ---------- Contact form ---------- */
.contact-form { margin-top: 1.5rem; max-width: 36rem; }
.contact-form label { display: block; font-size: .85rem; margin-bottom: .3rem; color: var(--text); }
.contact-form .form-control { border-radius: 8px; padding: .7rem .9rem; font-size: 1rem; }
.contact-form textarea.form-control { resize: vertical; min-height: 9rem; }
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-note { min-height: 1.4rem; margin: .5rem 0 1rem; font-size: .95rem; }
.section p.contact-note.contact-ok { color: var(--link) !important; }
.section p.contact-note.contact-error { color: #b42318 !important; }
:root[data-theme="dark"] .section p.contact-note.contact-error { color: #ff9b8f !important; }
.contact-alt { margin-top: 1.5rem; font-size: .95rem; }
.contact-alt a { color: var(--link); }

/* ---------- Instagram and TikTok (click to load) ---------- */
.social-embed { max-width: 540px; margin: 1.5rem auto; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); background: var(--band); }
.social-embed[data-kind="tiktok"] { max-width: 340px; }
.social-embed.is-loaded { background: transparent; }
.social-embed-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 300px; padding: 2rem 1.25rem; border: 0; background: transparent; color: var(--text); font: inherit; text-align: center; cursor: pointer; }
.social-embed-btn:hover .social-embed-play, .social-embed-btn:focus-visible .social-embed-play { background: var(--accent-dark); }
.social-embed-play { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--btn); }
.social-embed-play svg { width: 1.6rem; height: 1.6rem; fill: #fff; margin-left: .2rem; }
.social-embed-title { font-size: 1.05rem; }
.social-embed-note { font-size: .8rem; opacity: .85; }
.social-embed-link { display: block; padding: .6rem 1rem 1rem; text-align: center; font-size: .9rem; }
.social-embed-link a { color: var(--link); }

/* ianmclarenwallace.com: backend/public/css/site.css (SEO: skip link) */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: #fff; color: #000; padding: .6rem 1rem; border-radius: 0 0 6px 0; }
.skip-link:focus { left: 0; }
main { display: block; }