/* Craddock Financial Solutions
   Layout is carried on inline styles (as authored in the design); this file
   holds the things inline styles cannot express: resets, hover/focus states
   and the responsive overrides. */

html, body { margin: 0; padding: 0; background: #f7f4ef; }
* { box-sizing: border-box; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; cursor: pointer; }
a:hover { color: #a8814b; }
input, textarea, select, button { font: inherit; color: inherit; }
::selection { background: #a8814b; color: #f7f4ef; }

:focus-visible { outline: 2px solid #a8814b; outline-offset: 3px; }

/* The `hidden` attribute is only a UA rule of `display: none`, so any inline
   `display` on the same element silently beats it. Several elements here are
   laid out with inline styles and toggled via `hidden` (the nav drawer, the
   form's success panel), so this has to win outright — without it they render
   permanently open. */
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #10222f; color: #f7f4ef; padding: 12px 18px; font-size: 14px;
}
.skip-link:focus { left: 0; color: #f7f4ef; }

/* ── Interaction states ───────────────────────────────────────────────── */

.cta-dark:hover { background: #a8814b !important; color: #10222f !important; }
.cta-gold:hover { background: #10222f !important; color: #f7f4ef !important; }
.row-hover:hover { background: #efeae1; color: inherit; }
.underline-link { border-bottom: 1px solid currentColor; padding-bottom: 4px; }

.img-frame { position: absolute; inset: 0; overflow: hidden; }
.img-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ── Mobile nav drawer ────────────────────────────────────────────────── */
/* Layout lives here rather than inline so the `hidden` attribute above is
   never overridden. Default is closed, and there is no rule that opens it
   above the mobile breakpoint — so it cannot appear on desktop even if the
   attribute is removed. */
.nav-drawer {
  display: none;
  flex-direction: column;
  gap: 0;
  margin: 16px -20px 0;
  padding: 0 20px 4px;
  border-top: 1px solid #ded8cd;
  max-height: 70vh;
  overflow-y: auto;
}

@media (max-width: 1000px) {
  .nav-drawer:not([hidden]) { display: flex; }
}

/* ── Contact form ─────────────────────────────────────────────────────── */

.field {
  background: transparent; border: none; border-bottom: 1px solid rgba(247,244,239,0.3);
  padding: 9px 0; font-size: 15px; color: #f7f4ef; outline: none; width: 100%;
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
.field:focus { border-bottom-color: #a8814b; }
.field::placeholder { color: rgba(247,244,239,0.35); }
select.field option { color: #10222f; background: #f7f4ef; }
textarea.field { resize: vertical; min-height: 96px; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-error {
  background: rgba(168,129,75,0.14); border-left: 2px solid #a8814b;
  padding: 13px 16px; font-size: 13.5px; line-height: 1.6; color: #f7f4ef;
}
.field-invalid { border-bottom-color: #e0876b !important; }

/* ── Responsive ───────────────────────────────────────────────────────── */

[data-mobile-only] { display: none !important; }

@media (max-width: 1100px) {
  [data-site] [style*="repeat(5, 1fr)"],
  [data-site] [style*="repeat(4, 1fr)"],
  [data-site] [style*="repeat(3, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-site] [style*=" 56px"] { padding-left: 34px !important; padding-right: 34px !important; }
  [data-site] [data-bar] { flex-direction: column !important; gap: 3px !important; font-size: 10.5px !important; }
  [data-site] h1 { font-size: 42px !important; }
  [data-site] [style*="font-size: 62px"],
  [data-site] [style*="font-size: 58px"],
  [data-site] [style*="font-size: 54px"] { font-size: 42px !important; }
  [data-site] [data-desktop-only] { font-size: 12.5px !important; gap: 20px !important; }
  [data-site] [data-aud] { gap: 0 !important; border-bottom: none !important; }
  [data-site] [data-aud] > div { padding: 15px 0 !important; border-right: none !important; border-top: 1px solid #ded8cd !important; }
  [data-site] [data-post-row] { grid-template-columns: 160px minmax(0, 1fr) !important; gap: 12px 26px !important; padding: 22px 0 !important; align-items: start !important; }
  [data-site] [data-post-row] > *:nth-child(1) { grid-row: span 2; }
  [data-site] [data-post-row] > *:nth-child(3) { grid-column: 2; }
  [data-site] [data-hub-row] { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr) !important; gap: 10px 26px !important; padding: 24px 0 !important; align-items: start !important; }
  [data-site] [data-hub-row] > *:nth-child(3) { grid-column: 1 / -1; text-align: left !important; }
}

@media (max-width: 1000px) {
  [data-mobile-only] { display: flex !important; }
  [data-desktop-only] { display: none !important; }
  [data-site] header { padding-top: 14px !important; padding-bottom: 14px !important; }
}

@media (max-width: 860px) {
  [data-site] { overflow-x: hidden; }
  [data-mobile-only] { display: flex !important; }
  [data-desktop-only] { display: none !important; }
  [data-site] header { padding: 14px 20px !important; }
  [data-site] [data-aud] { gap: 0 !important; border-bottom: none !important; }
  [data-site] [data-aud] > div { padding: 14px 0 !important; border-right: none !important; border-top: 1px solid #ded8cd !important; }
  [data-site] [data-svc-card] { padding: 20px 0 !important; border-left: none !important; }
  [data-site] [data-hub-row] { padding: 20px 0 !important; gap: 12px !important; }
  [data-site] [data-post-row] { padding: 20px 0 !important; gap: 16px !important; }
  [data-site] [data-fact-row] { padding: 13px 0 !important; }
  [data-site] [data-bar] { flex-direction: column !important; gap: 4px !important; font-size: 10px !important; padding: 8px 20px !important; letter-spacing: 0.04em !important; }
  [data-site] [style*=" 56px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-site] [style*="padding: 44px 46px"] { padding: 28px 22px !important; }
  [data-site] [style*="grid-template-columns"]:not([data-keep-cols]) { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  [data-site] h1 { font-size: 34px !important; line-height: 1.12 !important; }
  [data-site] h2 { font-size: 25px !important; }
  [data-site] [style*="min-height: 560px"],
  [data-site] [style*="min-height: 480px"],
  [data-site] [style*="min-height: 420px"] { min-height: 230px !important; border-left: none !important; }
  [data-site] [style*="border-right: 1px solid #ded8cd"] { border-right: none !important; }
  [data-site] [style*="font-size: 62px"],
  [data-site] [style*="font-size: 58px"],
  [data-site] [style*="font-size: 54px"] { font-size: 34px !important; }
  [data-site] [style*="font-size: 46px"] { font-size: 30px !important; }
  [data-site] [style*="font-size: 40px"],
  [data-site] [style*="font-size: 36px"],
  [data-site] [style*="font-size: 34px"] { font-size: 25px !important; }
  [data-site] [style*="font-size: 32px"],
  [data-site] [style*="font-size: 30px"] { font-size: 23px !important; }
  [data-site] [style*="font-size: 28px"] { font-size: 22px !important; }
  [data-site] [style*="font-size: 22px"] { font-size: 19px !important; }
  [data-site] [style*="height: 118px"] { height: 180px !important; }
  [data-site] [style*="text-align: right"] { text-align: left !important; }
  [data-site] footer [style*="grid-template-columns"] { gap: 30px !important; }
}

/* ── Mobile refinements ───────────────────────────────────────────────── */
/* The design's responsive rules reflow the layout to one column but keep
   desktop spacing and type scale, which reads as cramped-yet-sprawling on a
   phone. These come after the blocks above so they win on equal specificity. */

@media (max-width: 860px) {

  /* Vertical rhythm. 74-84px of padding at each end of a section is ~10% of a
     375x812 viewport twice over; at desktop width it is half that share. */
  [data-site] main [style*=" 56px"] {
    padding-top: 44px !important;
    padding-bottom: 46px !important;
  }
  /* Sections that are deliberately tight keep their own spacing. */
  [data-site] main [style*="padding: 26px 56px 0"] {
    padding-top: 18px !important;
    padding-bottom: 0 !important;
  }
  [data-site] main [style*="padding: 44px 56px 64px"] {
    padding-top: 22px !important;
    padding-bottom: 40px !important;
  }
  [data-site] main [style*="padding: 34px 56px 84px"] {
    padding-top: 6px !important;
    padding-bottom: 46px !important;
  }
  [data-site] main [style*="padding: 0 56px"] { padding-top: 0 !important; padding-bottom: 0 !important; }
  [data-site] footer { padding-top: 40px !important; padding-bottom: 30px !important; }

  /* Legibility. 11-13px is fine for a desktop label read at arm's length and
     too small held in one hand; lift the floor without touching the hierarchy. */
  [data-site] [style*="font-size: 11px"],
  [data-site] [style*="font-size: 11.5px"] { font-size: 12px !important; }
  [data-site] [style*="font-size: 12px"],
  [data-site] [style*="font-size: 12.5px"],
  [data-site] [style*="font-size: 13px"] { font-size: 14px !important; }
  [data-site] [style*="font-size: 13.5px"],
  [data-site] [style*="font-size: 14px"],
  [data-site] [style*="font-size: 14.5px"] { font-size: 15px !important; }
  [data-site] [style*="font-size: 15px"],
  [data-site] [style*="font-size: 15.5px"],
  [data-site] [style*="font-size: 16px"],
  [data-site] [style*="font-size: 16.5px"] { font-size: 16px !important; }

  /* Tap targets. Footer and inline links measured 12-20px tall. */
  [data-site] footer a,
  [data-site] main a[style*="text-transform: uppercase"] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  [data-site] footer [style*="flex-direction: column"] > a { width: 100%; }

  /* The audience strip. On desktop it is a five-column ribbon; stacked on a
     phone it became five hairline rows costing 340px to say very little.
     Tiles do not help either, because every label is a long phrase rather than
     a short tag. Flowing it as one run of text separated by the same middot
     the disclaimer bar uses carries the identical content in a third of the
     height, and reads as a sentence rather than a list of fragments. */
  [data-site] [data-aud] {
    display: block !important;
    padding: 2px 0 22px !important;
    border-bottom: 1px solid #ded8cd !important;
  }
  [data-site] [data-aud] > div {
    display: inline !important;
    padding: 0 !important;
    border: none !important;
  }
  [data-site] [data-aud] > div > span { font-size: 14px !important; line-height: 1.75 !important; }
  [data-site] [data-aud] > div + div::before { content: " · "; color: #a8814b; }

  /* A little more presence for the hero image once it drops below the text. */
  [data-site] main [style*="min-height: 560px"] { min-height: 265px !important; }
}

/* Under 16px, iOS Safari zooms the viewport when a field takes focus and does
   not zoom back out — the single most common mobile form defect. */
@media (max-width: 1000px) {
  .field, .field option { font-size: 16px; }
  /* 36px is a tight target for a thumb; this brings the fields to ~44px. */
  .field { padding-top: 13px; padding-bottom: 13px; }
}

@media print {
  [data-bar], header, footer, .no-print { display: none !important; }
  [data-site] { background: #fff !important; color: #000 !important; }
}