/* =============================================================================
   contact.css — Contact page content
   Used only on pages/contact.html.

   Component ownership:
     .contact__intro    — opening paragraph (Regular 14px white, left-aligned)
     .contact__heading  — "Choose how you'd like…" intro (Regular 16px white, left-aligned)
     .contact__actions   — flex row wrapper (desktop only) for the WhatsApp + Phone buttons
     .btn-action        — shared action button variant (transparent bg, gray-100 border)
     .contact__btn-phone — spacing modifier for the second action button
     .contact__copy      — copy-to-clipboard button (icon only, no chrome)

   Spacing:
     48px above intro      (margin-top on .contact__intro — title → first
                            body text, site-wide spacing pass)
     32px above heading    (margin-top on .contact__heading)
     24px below heading    (margin-bottom on .contact__heading → WhatsApp button)
     24px above phone btn  (margin-top on .contact__btn-phone)
     32px above form       (margin-top on .contact__form)
     8px between label and value   (margin-top on .contact__value)

   .page-main gets text-align: left below (this file only loads on
   contact.html, so it's effectively scoped to this page) — matches the
   left-aligned convention used on every other content page (About,
   Commission, FAQs — see e.g. commission.css). This left-aligns every
   text block and the WhatsApp/Phone buttons once content-container.css
   caps their width at 240px on desktop.

   Exception: the Send-message button + hint below the textarea are
   deliberately NOT left-aligned with the rest of the page — they align to
   the textarea's own right edge instead, via text-align: right on
   .contact__form-cta (see that rule below), overriding the inherited
   left value from .page-main for just that block.

   .contact__textarea is explicitly reset to text-align: left in both
   cases — form input text should never be centered or right-aligned.

   Desktop column width (min-width: 1024px): .content-container (shared
   sitewide, content-container.css; wraps breadcrumb + page title + this
   page's .page-main) is narrowed from its sitewide 760px default to 700px
   and LEFT-aligned (align-self: flex-start) — the same column width and
   position already used on Collection, Commission, and The Artistic
   Process (see commission.css/process.css for the fuller rationale).
   Breadcrumb, title, and every field below all share this one column,
   its left edge lining up with every other content page's. Mobile is
   completely unaffected — the rule only exists inside its own
   min-width: 1024px media query. An earlier pass used align-self: center
   here instead, which visibly shifted this page's content to the right of
   where every other page starts; reverted per explicit request that this
   page follow the same left-aligned layout as Collection and The Artistic
   Process.
   ============================================================================= */

/* ── Desktop column width ─────────────────────────────────────────────────
 * Same mechanism as pages/commission.html's own copy of this rule (see
 * that file's comment for the full explanation) — narrows
 * .content-container from its sitewide 760px default to 700px and
 * left-aligns it via align-self: flex-start (content-container.css's own
 * default, restated explicitly), scoped to this page only since
 * contact.css only ever loads on pages/contact.html.
 * ────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .content-container {
    max-width: 700px;
    align-self: flex-start;
  }
}


.page-main {
  text-align: left;
}


/* ── Intro paragraph ─────────────────────────────────────────────────────────── */
/*
 * First content block below the page title.
 * 14px Regular White — same line-height and text cadence as body copy.
 * Matches the natural line-wrap shown in the design.
 */

.contact__intro {
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px */
  font-weight: 400;                    /* Regular */
  color: var(--color-white);
  text-align: left;
  line-height: 1.5rem;                 /* 24px — same as site body copy */
  margin: 0;
  margin-top: var(--space-8);          /* 32px — title → first body text
                                           (desktop — .page-title has no
                                           reserved zone below it, so this
                                           margin IS the full visible gap) */
}

/* Mobile only: below 1024px the title sits inside .section-title-bar's
   fixed 72px zone (unchanged — matches Collection, kept exactly as-is),
   which centers the title and leaves ~21.6px of empty space below the
   title's own text before the zone's box ends. That reserved space is
   invisible but still counts toward the rendered title→text distance, so
   the margin here is reduced to keep the visible gap at or under 32px. */
@media (max-width: 1023px) {
  .contact__intro {
    margin-top: var(--space-2);        /* 8px — visible gap lands at ~29.6px */
  }
}


/* ── Contact action intro ────────────────────────────────────────────────────── */
/*
 * "Choose how you'd like to get in touch."
 * Regular 16px White — introduces the two action buttons below.
 * margin-bottom: 24px → gap to the WhatsApp button.
 */

.contact__heading {
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px */
  font-weight: 400;                    /* Regular */
  color: var(--color-gray-100);        /* reduced visual weight vs buttons */
  text-align: left;
  line-height: 1.5;
  margin: 0;
  margin-top: var(--space-8);          /* 32px above heading */
  margin-bottom: var(--space-2);       /* 8px below heading → WhatsApp button — matches form heading → textarea */
}


/* ── Phone value row ─────────────────────────────────────────────────────────── */
/*
 * Inline-flex row containing the phone number and the copy icon.
 * display: inline-flex — an inline-level box, so it simply sits inline
 * with surrounding text; .contact__section's own text-align: left (below)
 * positions it at the section's left edge, matching every other block on
 * the page.
 * gap: 8px — spec gap between number and icon.
 * margin-top: 8px — same spacing as .contact__value below its label.
 */

.contact__value-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);               /* 8px between number and icon */
  margin-top: var(--space-2);        /* 8px below label */
}


/* ── Copy-to-clipboard button ────────────────────────────────────────────────── */
/*
 * Chromeless button — no visible container of any kind.
 * Inline SVG path uses fill="currentColor", driven by color below.
 * padding: 4px gives a 24×24 touch target around the 16×16 glyph.
 */

.contact__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: 0;
  padding: 4px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  color: var(--color-gray-300);      /* #858585 — drives currentColor in the SVG */
  flex-shrink: 0;
}

.contact__copy:hover {
  color: var(--color-gray-200);      /* #9E9E9E — subtle on hover */
}

.contact__copy svg {
  display: block;
  overflow: visible;
}

.contact__copy:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ── Action button variant ───────────────────────────────────────────────────── */
/*
 * Shared by the WhatsApp and Phone buttons.
 * Transparent background, 1px gray-100 border — matches .btn-outline border
 * treatment but without the carbon fill.
 * gap: 16px — space between icon and label.
 * Both buttons are identical in structure; only the icon and label text differ.
 */

.btn-action {
  width: 100%;
  background: transparent;
  border-color: var(--color-gray-300);   /* 1px solid gray-300 — more visible border */
  gap: var(--space-4);                   /* 16px between icon and label */
}

.btn-action:hover {
  opacity: 0.85;                         /* matches .btn:hover */
}

.btn-action:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}


/* ── Action buttons row ──────────────────────────────────────────────────────── */
/*
 * .contact__actions wraps the WhatsApp + Phone buttons (added specifically
 * for this wrapper — no other structural change to the page).
 *
 * Mobile: no rules here apply — the buttons stay stacked via
 * .contact__btn-phone's margin-top below, exactly as before.
 *
 * Desktop (≥1024px): becomes a flex row with a fixed 24px gap, matching
 * every other desktop-only structural row change in this codebase (see
 * artwork-section, collection-grid, artwork-story). Each button is already
 * capped to max-width: 240px by content-container.css, so two buttons +
 * the 24px gap comfortably fit within the 760px content-container — no
 * width/max-width changes needed here.
 */

@media (min-width: 1024px) {
  .contact__actions {
    display: flex;
    align-items: center;
    gap: var(--space-6);                 /* 24px — fixed horizontal gap between the two buttons */
  }
}


/* ── Phone button spacing ────────────────────────────────────────────────────── */
/*
 * Mobile: adds the 24px gap between the WhatsApp button and the Phone
 * button (stacked layout, unchanged).
 * Desktop: zeroed — the 24px gap is provided by .contact__actions' gap
 * property once the buttons sit side by side, so this would otherwise
 * double the spacing.
 */

.contact__btn-phone {
  margin-top: var(--space-6);            /* 24px between WhatsApp and Phone — mobile stacked layout only */
}

@media (min-width: 1024px) {
  .contact__btn-phone {
    margin-top: 0;
  }
}


/* ── Contact option group ────────────────────────────────────────────────────── */
/*
 * Groups a label ("Email", "Instagram") and its corresponding value/link.
 * 32px above each group (margin-top on .contact__section).
 * text-align: left — was center; reverted per explicit request that this
 * page follow the same left-aligned layout as Collection and The Artistic
 * Process. .page-main's own text-align: left (above) would already supply
 * this by inheritance, but it's restated explicitly here so this rule
 * doesn't rely on that ancestor value being remembered correctly.
 */

.contact__section {
  width: 100%;
  text-align: left;
  margin-top: var(--space-8);          /* 32px above each group */
}


/* ── Option label ────────────────────────────────────────────────────────────── */
/*
 * Category name — e.g. "Email", "Instagram".
 * 14px Regular Gray 100 — matches .artwork-story__label treatment.
 */

.contact__label {
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px */
  font-weight: 400;                    /* Regular */
  color: var(--color-gray-100);        /* #B8B8B8 */
  line-height: 1.5rem;                 /* 24px */
  margin: 0;
}


/* ── Option value / link ─────────────────────────────────────────────────────── */
/*
 * The contact address or handle.
 * 14px Regular White — same weight as surrounding copy, no underline.
 * Inherits hover opacity from globals.css a:hover rule.
 */

.contact__value {
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px */
  font-weight: 400;                    /* Regular */
  color: var(--color-white);
  line-height: 1.5rem;                 /* 24px */
  margin: 0;
  margin-top: var(--space-2);          /* 8px below label */
}


/* ── Underlined link variant ─────────────────────────────────────────────────── */
/*
 * Add to <a> elements alongside .contact__value to get the underlined link style.
 * text-underline-offset: 3px — separates underline from descenders slightly.
 * globals.css sets text-decoration: none on all <a> — this overrides it.
 */

a.contact__link {
  text-decoration: underline;          /* overrides globals.css a { text-decoration: none } */
  text-underline-offset: 3px;
}


/* ── Contact form ────────────────────────────────────────────────────────────── */
/*
 * Form section below the Phone button.
 * margin-top: 32px — spec gap between the last action button and this section.
 */

.contact__form {
  width: 100%;
  margin-top: var(--space-8);          /* 32px below Phone button */
}


/* ── Form heading ────────────────────────────────────────────────────────────── */
/*
 * "Prefer to write? Send me a message below."
 * Regular 14px White — same weight as body copy.
 * margin-bottom: 16px separates it from the textarea.
 */

.contact__form-heading {
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px */
  font-weight: 400;                    /* Regular */
  color: var(--color-gray-100);        /* reduced weight — doesn't compete with buttons */
  text-align: left;
  line-height: 1.5rem;                 /* 24px */
  margin: 0;
  margin-bottom: var(--space-2);       /* 8px between heading and textarea (reduced by 8px) */
}


/* ── Message textarea ────────────────────────────────────────────────────────── */
/*
 * Multiline input. Full-width, 142px tall, transparent background.
 * Border follows the site's Gray 100 token. Corner radius 4px per spec.
 * Placeholder uses Gray 300 for a muted but readable hint.
 * focus-visible: border brightens to white — matches site's interaction model.
 */

.contact__textarea {
  display: block;
  width: 100%;
  height: 120px;
  background: transparent;
  border: 1px solid var(--color-gray-300);
  border-radius: 4px;
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px */
  font-weight: 400;
  color: var(--color-white);
  text-align: left;                    /* explicit safeguard — typed/placeholder text must never be centered or right-aligned, regardless of what any ancestor sets (.contact__form-cta below is a sibling, not an ancestor, so its text-align: right can't reach this element anyway) */
  line-height: 1.5rem;                 /* 24px */
  padding: var(--space-4);             /* 16px inner padding */
  box-sizing: border-box;
  resize: vertical;                    /* vertical resize only */
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.contact__textarea::placeholder {
  color: var(--color-gray-300);        /* #858585 — muted placeholder */
}

.contact__textarea:focus-visible {
  border-color: var(--color-white);    /* brighten border on focus */
}


/* ── Form CTA area ───────────────────────────────────────────────────────────── */
/*
 * Contains the submit button and hint text below the textarea.
 * margin-top: 24px — spec gap between textarea and button.
 *
 * text-align: right — deliberate exception to the page's left-aligned
 * layout (.page-main above). The Send button and hint align with the
 * textarea's own right edge instead of the page's left edge: the button
 * is capped to max-width: 240px by content-container.css, so text-align:
 * right here positions its right edge flush with the textarea's right
 * edge (both this element and .contact__textarea are full-width children
 * of .contact__form, so they share the same right boundary).
 */

.contact__form-cta {
  margin-top: var(--space-6);          /* 24px between textarea and button */
  text-align: right;                   /* aligns button + hint to the textarea's right edge — see note above */
}


/* ── Form hint ───────────────────────────────────────────────────────────────── */
/*
 * "I'll usually reply within 24–48 hours"
 * Regular 14px Gray 100, right-aligned (see .contact__form-cta above).
 * margin-top: 16px — spec gap between button and hint.
 */

.contact__form-hint {
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px */
  font-weight: 400;                    /* Regular */
  color: var(--color-gray-100);        /* #B8B8B8 */
  text-align: right;                   /* aligned with the Send button + textarea's right edge — see .contact__form-cta above */
  line-height: 1.5rem;                 /* 24px */
  margin: 0;
  margin-top: var(--space-4);          /* 16px between button and hint */
  padding-bottom: var(--space-12);     /* 48px bottom spacing below hint */
}


/* ── Form submit button override ─────────────────────────────────────────────── */
/*
 * Quieter visual weight than .btn-outline — no border, semi-transparent gray fill.
 * Gray 500 (#525252) at 80% opacity via rgba. Scoped to .contact__form so it
 * does not affect .btn-outline used elsewhere.
 * hover/focus adapt the opacity rather than removing the background.
 */

.contact__form .btn-outline {
  border: none;
  background: rgba(82, 82, 82, 0.8);  /* --color-gray-500 at 80% opacity */
}

.contact__form .btn-outline:hover {
  opacity: 0.85;                       /* matches site-wide .btn:hover pattern */
  background: rgba(82, 82, 82, 0.8);  /* preserve fill on hover */
}

.contact__form .btn-outline:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.contact__form .btn-outline:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}