/* ===========================================================================
   Hochberger Law — Coastal: supplemental styles
   The design system lives in theme.json. These are decorative touches that
   block markup / theme.json can't express cleanly. Classes are applied to
   blocks via their "Additional CSS class(es)" field so everything stays
   editable in the Site Editor.
   ========================================================================== */

/* --- utility: uppercase eyebrow label --- */
.hp-eyebrow{
  font-size:.72rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--wp--preset--color--accent-3);
}
.hp-eyebrow.is-rose{ color:var(--wp--preset--color--accent-3); }

/* --- top utility bar --- */
.hp-topbar{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; }

/* --- hero: the left-to-right veil is the cover block's native gradient
   overlay (set in the template). Keep the inner content comfortably narrow
   and left-aligned. --- */
.hp-hero .wp-block-cover__inner-container{ width:100%; }
.hp-hero-copy{ max-width:600px; }
@media (max-width:781px){
  /* on phones the gradient reads better top-to-bottom; the overlay is a solid
     enough veil on the left that dark text stays legible regardless */
  .hp-hero-copy{ max-width:100%; }
}

/* --- thin decorative ribbon divider --- */
.hp-ribbon{
  height:4px;
  background:var(--wp--preset--gradient--ribbon);
}

/* --- practice-area cards: soft top accent, lift on hover --- */
.hp-card{
  border:1px solid color-mix(in srgb, var(--wp--preset--color--accent-3) 12%, transparent);
  border-radius:16px;
  overflow:hidden;
  background:var(--wp--preset--color--white);
  transition:transform .2s ease, box-shadow .2s ease;
}
.hp-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 44px -26px rgba(44,74,75,.32);
}
/* blog card: flush featured image on top */
.hp-card .wp-block-post-featured-image{ margin:0; }
.hp-card .wp-block-post-featured-image img{ border-radius:0; width:100%; display:block; }
.hp-card-body .wp-block-post-title{ line-height:1.16; margin:0; }
.hp-card-body .wp-block-post-title a{ color:var(--wp--preset--color--ink-strong); text-decoration:none; }
.hp-card-body .wp-block-post-title a:hover{ color:var(--wp--preset--color--accent-1); }
/* small, quiet meta line: date · category */
.hp-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--wp--preset--color--muted);
}
.hp-meta .wp-block-post-date,
.hp-meta .wp-block-post-terms{ margin:0; font-size:inherit; color:var(--wp--preset--color--muted); }
.hp-meta a{ color:inherit; text-decoration:none; }
.hp-meta a:hover{ color:var(--wp--preset--color--accent-3); }
.hp-meta .wp-block-post-terms::before{ content:"·"; margin-right:.5rem; }
/* small rounded icon chip inside each card */
.hp-chip{
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; margin-bottom:6px;
}
.hp-chip.c1{ background:var(--wp--preset--color--accent-1); }
.hp-chip.c2{ background:#9ec7d6; }
.hp-chip.c3{ background:var(--wp--preset--color--rose); }
.hp-chip.c4{ background:var(--wp--preset--color--champagne); }
.hp-chip svg{ width:24px; height:24px; }

/* --- about portrait: soft frame + champagne ring --- */
.hp-portrait img{
  border-radius:18px;
  border:6px solid #fff;
  box-shadow:0 24px 50px -26px rgba(44,74,75,.4);
}

/* --- trust stat numbers --- */
.hp-stat .wp-block-heading{
  font-family:var(--wp--preset--font-family--vollkorn);
  color:var(--wp--preset--color--accent-3);
  line-height:1;
  margin:0;
}

/* --- ghost / text button variant (secondary CTA) --- */
.hp-btn-ghost .wp-block-button__link{
  background:transparent !important;
  color:var(--wp--preset--color--contrast) !important;
  border:0 !important;
  border-bottom:1px solid var(--wp--preset--color--champagne) !important;
  border-radius:0 !important;
  padding:.5rem .25rem !important;
}

/* --- header nav spacing --- */
.wp-block-navigation{ column-gap:1.6rem; }

/* --- footer: white logo, keep natural (square) aspect ratio --- */
.hp-footer .wp-block-image img{ height:auto; }

/* footer links must be light on the dark teal (theme link color = deep teal,
   which is invisible here). */
.hp-footer a{ color:#e7f0ee; text-underline-offset:2px; }
.hp-footer a:hover{ color:var(--wp--preset--color--champagne); }

/* --- contact form --- */
.hp-form{ max-width:640px; margin:0 auto; }
.hp-hp{ display:none !important; }
.hp-form form{ display:flex; flex-direction:column; gap:1.1rem; }
.hp-form .hp-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.hp-form label{
  display:flex; flex-direction:column; gap:.4rem;
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--wp--preset--color--ink-strong);
}
.hp-form .req{ color:var(--wp--preset--color--rose); margin-left:.2em; }
.hp-form input,
.hp-form textarea{
  font-family:var(--wp--preset--font-family--manrope);
  font-size:1rem; font-weight:400; letter-spacing:normal; text-transform:none;
  color:var(--wp--preset--color--contrast);
  background:var(--wp--preset--color--white);
  border:1px solid color-mix(in srgb, var(--wp--preset--color--accent-3) 20%, transparent);
  border-radius:10px; padding:.8rem .9rem; width:100%;
}
.hp-form input:focus,
.hp-form textarea:focus{
  outline:none; border-color:var(--wp--preset--color--accent-1);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent-1) 25%, transparent);
}
.hp-form textarea{ resize:vertical; min-height:130px; }
.hp-form .hp-form-submit{
  align-self:flex-start; margin-top:.3rem;
  background:var(--wp--preset--color--accent-3); color:#fff;
  border:0; border-radius:30px; cursor:pointer;
  font-family:var(--wp--preset--font-family--manrope); font-weight:700;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.95rem 1.9rem;
}
.hp-form .hp-form-submit:hover{ background:var(--wp--preset--color--ink-strong); }
.hp-form-note{
  border-radius:12px; padding:.9rem 1.1rem; margin:0 0 1.2rem;
  font-size:.95rem;
}
.hp-form-note.is-success{ background:var(--wp--preset--color--seafoam); color:var(--wp--preset--color--ink-strong); border:1px solid var(--wp--preset--color--accent-1); }
.hp-form-note.is-error{ background:#fbece7; color:#8a3b2c; border:1px solid var(--wp--preset--color--rose); }
@media (max-width:560px){ .hp-form .hp-form-row{ grid-template-columns:1fr; } }