/*
Theme Name:       Danielle Byrne
Theme URI:        https://daniellebyrne.co.za/
Description:      Portfolio child theme for abstract painter Danielle Byrne Raubenheimer. Block theme / FSE, built atop Twenty Twenty-Five. Brand tokens in theme.json; no Google Fonts CDN.
Author:           Marula Music
Author URI:       https://marulamusic.com/
Template:         twentytwentyfive
Version:          0.6.16
Requires at least: 6.5
Requires PHP:     8.1
License:          GPL v2 or later
License URI:      http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:      daniellebyrne
*/

/* Global CSS is loaded from the child theme's style.css via functions.php.
   Brand tokens are in theme.json; only small globals that theme.json cannot
   express (e.g. @font-face, selection color) live here. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/manrope/manrope-latin-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/manrope/manrope-latin-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/manrope/manrope-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/manrope/manrope-latin-600.woff2') format('woff2');
}

::selection {
  background: rgba(244, 165, 160, 0.35);
  color: #1C1C1E;
}

:root {
  --dba-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Keep focus rings visible (accessibility) — brand-appropriate hairline ring. */
:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent, #E07A75);
  outline-offset: 2px;
}

/* ---------- site header ---------- */
/* Sticky on the template-part wrapper, not the inner .dba-site-header —
   the inner element's parent is only 73px tall, which gives position:sticky
   zero travel range. Lifting the sticky to the template-part wrapper uses
   <.wp-site-blocks> (the full page) as the scroll container. */
header.wp-block-template-part:has(> .dba-site-header) {
  position: sticky;
  top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
  z-index: 50;
}

/* Zero out the default margin WP core applies to the main element after
   the header template-part so the hero's negative margin-block-start lands
   flush against the header. Without this, `main` picks up a 1.2rem gap
   from `:root :where(.is-layout-constrained) > *`. */
main.wp-block-group {
  margin-block-start: 0 !important;
}

/* Frosted glass is applied via ::before rather than on .dba-site-header
   itself. Reason: `backdrop-filter` on an element makes that element a
   containing block for its `position:fixed` descendants. WP's mobile
   navigation overlay uses `position:fixed` to fill the viewport, so when
   the filter lives on the header the overlay collapses to ~73px (the
   header height). Scoping the filter to a pseudo-element keeps the
   visual but removes the containment trap. */
.dba-site-header {
  position: relative;
  background-color: transparent !important;
}
.dba-site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(242, 242, 243, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: -1;
  pointer-events: none;
}

.dba-site-header .wp-block-site-title a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

/* Inner flex row spans the header's content box (edge-to-64px-padding),
   bypassing theme.json contentSize so the site-title sits flush left and
   the nav sits flush right within the header's padding boundary. */
.dba-site-header > .wp-block-group:not(.alignfull):not(.alignwide) {
  max-width: none;
  width: 100%;
}

/* ---------- lightbox ---------- */
.dba-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(28, 28, 30, 0.92);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dba-lightbox[hidden] { display: none; }
.dba-lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
}
.dba-lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 0;
  background: rgba(250, 250, 251, 0.12);
  color: #FAFAFB;
  font-size: 28px;
  line-height: 1;
  border-radius: 2px;
  cursor: pointer;
}
.dba-lightbox__close:hover { background: rgba(250, 250, 251, 0.22); }

/* ---------- home hero ----------
   `margin-block-start: -73px !important` bleeds the hero up under the
   sticky header (73px tall). Uses `!important` because WP core's
   `:root :where(.is-layout-constrained) > :first-child { margin-block-start: 0 }`
   loads after theme.css and would otherwise reset it. */
.dba-hero {
  position: relative;
  overflow: hidden;
  margin-block-start: -73px !important;
  padding-left: var(--wp--preset--spacing--5) !important;
  padding-right: var(--wp--preset--spacing--5) !important;
  padding-bottom: var(--wp--preset--spacing--5) !important;
}
.dba-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27,26,24,0.05) 0%, rgba(27,26,24,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Cover block gives the inner container no height by default, so
   `justify-content: flex-end` has nothing to work with. `flex: 1`
   stretches it through the cover's flex column, letting the content
   land hard against the bottom edge of the hero. */
.dba-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 auto;
  align-self: stretch;
}
.dba-hero__content {
  color: var(--wp--preset--color--paper);
  max-width: 720px;
}
.dba-hero__eyebrow {
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--tracking--wider);
  text-transform: uppercase;
  color: rgba(250, 250, 251, 0.82);
  margin: 0 0 var(--wp--preset--spacing--5, 24px);
}
.dba-hero__title {
  color: var(--wp--preset--color--paper) !important;
  font-weight: 300;
  font-size: clamp(40px, 6vw, 72px);
  line-height: var(--wp--custom--line-height--tight);
  letter-spacing: var(--wp--custom--tracking--tight);
  margin: 0 0 var(--wp--preset--spacing--5, 24px);
  font-style: normal;
}
.dba-hero__note {
  color: rgba(250, 250, 251, 0.88);
  font-size: var(--wp--preset--font-size--lg);
  line-height: var(--wp--custom--line-height--normal);
  max-width: 54ch;
  margin: 0 0 var(--wp--preset--spacing--7, 48px);
}
.dba-hero__ctas .wp-block-button__link {
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
}
.dba-hero__ctas .wp-block-button__link:hover {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--canvas);
}
.dba-hero__spec {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--tracking--wider);
  text-transform: uppercase;
  color: rgba(250, 250, 251, 0.75);
  margin: 0;
  z-index: 2;
}

/* ---------------------------------------------------------------------------
 * Phase 4: contact form — overrides Fluent Forms' default chrome.
 *
 * Fluent Forms ships its own stylesheet (`fluent-forms-public-default.css`).
 * Our overrides are scoped to `.dba-contact` and use slightly higher specificity
 * via element selectors (e.g. `.dba-contact .ff-el-input--text input`) so that
 * we don't need `!important`.
 * ------------------------------------------------------------------------- */

/* Container rhythm */
.dba-contact { max-width: 720px; margin-inline: auto; }
.dba-contact__form-wrap { margin-block-start: var(--wp--preset--spacing--6); }

/* Back link */
.dba-contact__back { margin: 0 0 var(--wp--preset--spacing--5); font-size: 14px; }
.dba-contact__back a { color: var(--wp--preset--color--ink-muted); text-decoration: none; }
.dba-contact__back a:hover { color: var(--wp--preset--color--ink); }

/* Inquiry card */
.dba-inquiry-card {
    margin-block: var(--wp--preset--spacing--6);
    padding: 20px;
    border: 1px solid var(--wp--custom--hairline, rgba(0,0,0,0.12));
    border-radius: 4px;
    background: var(--wp--preset--color--canvas-soft, rgba(0,0,0,0.02));
}
.dba-inquiry-card__inner { display: flex; align-items: center; gap: 20px; }
.dba-inquiry-card__thumb {
    width: 80px; height: 80px; object-fit: cover; flex: none; border-radius: 2px;
}
.dba-inquiry-card__eyebrow {
    margin: 0 0 4px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--wp--preset--color--ink-muted);
}
.dba-inquiry-card__title {
    margin: 0 0 4px; font-size: 18px; font-weight: 400; line-height: 1.25;
    color: var(--wp--preset--color--ink);
}
.dba-inquiry-card__meta {
    margin: 0; font-size: 13px; color: var(--wp--preset--color--ink-soft);
}

/* Fluent Forms underline-only inputs */
.dba-contact .fluentform { padding: 0; }
.dba-contact .ff-el-input--label label {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--ink-muted);
    font-weight: 500;
}
.dba-contact .ff-el-form-control,
.dba-contact input[type="text"],
.dba-contact input[type="email"],
.dba-contact textarea {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--wp--custom--hairline, rgba(0,0,0,0.15));
    background: transparent;
    padding: 10px 0;
    font-size: 16px;
    font-family: inherit;
    color: var(--wp--preset--color--ink);
    box-shadow: none;
    transition: border-color 150ms ease;
}
.dba-contact .ff-el-form-control:focus,
.dba-contact input[type="text"]:focus,
.dba-contact input[type="email"]:focus,
.dba-contact textarea:focus {
    outline: 0;
    border-bottom-color: var(--wp--preset--color--accent-deep);
    box-shadow: none;
}
.dba-contact textarea { min-height: 120px; resize: vertical; }

/* Two-column Name/Email grid, full-width message */
.dba-contact .ff-t-container { gap: var(--wp--preset--spacing--5); }
@media (min-width: 640px) {
    .dba-contact .ff-t-container.ff-columns-2 { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Submit button — overrides Fluent Forms' per-form selector
   (`form.fluent_form_N .ff-btn-submit`) which would otherwise win
   on specificity and paint the button blue. */
.dba-contact .fluentform .ff-btn-submit,
.dba-contact .ff-btn-submit {
    display: inline-block;
    background: var(--wp--preset--color--ink) !important;
    color: var(--wp--preset--color--canvas) !important;
    border: 0 !important;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    transition: background 150ms ease;
}
.dba-contact .fluentform .ff-btn-submit:hover,
.dba-contact .ff-btn-submit:hover {
    background: var(--wp--preset--color--accent) !important;
}

/* Validation + error states */
.dba-contact .ff-el-is-error .ff-el-form-control { border-bottom-color: #b3261e; }
.dba-contact .error { color: #b3261e; font-size: 12px; margin-top: 6px; }

/* Success state */
.dba-contact__success {
    padding: 32px 0;
    border-top: 1px solid var(--wp--custom--hairline, rgba(0,0,0,0.12));
}
.dba-contact__success-title {
    font-family: inherit;
    font-weight: 300;
    font-size: 44px;
    line-height: 1.1;
    color: var(--wp--preset--color--accent-deep);
    margin: 0 0 12px;
    font-style: normal;
}
.dba-contact__success-kicker {
    font-size: 16px;
    color: var(--wp--preset--color--ink-soft);
    margin: 0;
}

/* Sticky footer — pin the footer to the viewport bottom when content is
   shorter than the screen (Contact page was the motivating case). No-op on
   long pages because main naturally exceeds viewport height. We avoid touching
   <html>/<body> so the WP admin bar offset (margin-top: 32px on html) is not
   disturbed. */
.wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
body.admin-bar .wp-site-blocks {
    min-height: calc(100vh - 32px);
    min-height: calc(100dvh - 32px);
}
@media screen and (max-width: 782px) {
    body.admin-bar .wp-site-blocks {
        min-height: calc(100vh - 46px);
        min-height: calc(100dvh - 46px);
    }
}
.wp-site-blocks > main {
    flex: 1 0 auto;
}
.wp-site-blocks > footer {
    flex-shrink: 0;
}