/*
Theme Name: Merritt Law
Description: Custom block theme for Merritt Law. Board Certified Austin divorce and custody attorney Chris Merritt. Built from the 2026 redesign.
Version: 1.3.6
Author: Merritt Law
Requires at least: 6.9
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: merritt-law
*/
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap');
@font-face { font-family: "Marcellus SC"; src: url("assets/fonts/MarcellusSC-Regular.ttf") format("truetype"); font-display: swap; }

/* Merritt Law — color tokens */
:root {
  /* Brand reds (from logo radial: bright center → deep edge) */
  --red-900: #3c0709;
  --red-800: #4a0a0d;
  --red-700: #6e1014;
  --red-600: #7f1416;   /* primary brand red */
  --red-500: #96181c;
  --red-400: #a8272c;
  --red-100: #f5e6e6;
  --red-50:  #faf2f2;

  /* Charcoal / neutrals (wordmark gray #414042) */
  --gray-900: #2b2b2d;
  --gray-800: #414042;  /* wordmark charcoal */
  --gray-700: #55565a;
  --gray-500: #85868a;
  --gray-400: #a7a8ab;
  --gray-300: #c8c9cb;  /* logo ring silver */
  --gray-200: #e2e2e4;
  --gray-100: #efefef;
  --gray-50:  #f7f6f4;
  --white:    #ffffff;

  /* Semantic aliases */
  --brand:            var(--red-600);
  --brand-strong:     var(--red-800);
  --brand-soft:       var(--red-50);

  --text-heading:     var(--gray-800);
  --text-body:        var(--gray-700);
  --text-muted:       var(--gray-500);
  --text-inverse:     var(--white);
  --text-link:        var(--red-600);
  --text-link-hover:  var(--red-800);

  --surface-page:     var(--white);
  --surface-alt:      var(--gray-50);
  --surface-card:     var(--white);
  --surface-dark:     var(--gray-800);
  --surface-brand:    var(--red-700);

  --border-default:   var(--gray-200);
  --border-strong:    var(--gray-300);
  --border-focus:     var(--red-600);

  --success: #2e7d43;
  --warning: #b07818;
  --danger:  var(--red-500);
}


html { margin: 0; padding: 0; background: #fff; }
body { margin: 0 !important; padding: 0 !important; background: #fff; }
/* keep the WP admin toolbar from covering the header for logged-in users */
body.admin-bar header { top: 32px !important; }
@media (max-width: 782px) { body.admin-bar header { top: 46px !important; } }
/* on phones the WP admin bar scrolls away, so remove the reserved gap (2026-07-16) */
@media (max-width: 600px) { body.admin-bar header { top: 0 !important; } }
body { font-family: Lato, sans-serif; }
.wp-site-blocks { padding: 0 !important; }
.wp-site-blocks > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.wp-site-blocks > .wp-block-html:last-child footer { margin-bottom: 0 !important; }

h1, h2, h3 { font-family: 'Marcellus SC', Cinzel, Georgia, serif; font-weight: 400; color: var(--gray-800); }
.ml-content a { color: var(--red-600); }
.ml-sidebar-layout aside a:hover { color: var(--red-600); }
.ml-drop:hover .ml-drop-menu { display: block !important; }

.ml-btn { display:inline-flex; align-items:center; justify-content:center; font-family:Lato,sans-serif; font-weight:700; font-size:15px; padding:10px 22px; border-radius:2px; text-decoration:none; cursor:pointer; transition:background 150ms ease, color 150ms ease; text-align:center; }
.ml-btn-lg { padding:14px 28px; font-size:16px; }
.ml-btn-full { width:100%; box-sizing:border-box; }
.ml-btn-primary { background:var(--red-600); color:#fff; }
a:hover .ml-btn-primary, .ml-btn-primary:hover { background:var(--red-800); }
.ml-btn-dark { background:var(--gray-800); color:#fff; }
a:hover .ml-btn-dark, .ml-btn-dark:hover { background:var(--gray-900); }
.ml-btn-secondary { border:2px solid var(--red-600); color:var(--red-600); background:transparent; }

@media (max-width: 900px) {
  .ml-sidebar-layout { flex-direction: column !important; }
  .ml-sidebar-layout aside { width: 100% !important; }
}
@media (max-width: 700px) {
  /* 2026-07-16 mobile fixes: hide the stock hero photo on phones (badges stay); in the
     "You need a plan" section, show the Meet Chris video above the text instead of below it. */
  img[src*="hero-family"] { display: none !important; }
  .ml-chris-inset { display: flex !important; }
  div[style*="1.15fr"] > div:last-child { order: -1 !important; }

  div[style*="grid-template-columns"]:not([style*="1.4fr"]) { display: flex !important; flex-direction: column !important; gap: 28px !important; }
  div[style*="1.4fr"] { grid-template-columns: 1.1fr 1fr 1fr !important; }
  h1 { font-size: 32px !important; line-height: 1.2 !important; }
  h2 { font-size: 27px !important; }
  h3 { font-size: 20px !important; }
  header nav { display: none !important; }
  div[style*="padding:88px 32px"], div[style*="padding: 88px 32px"] { padding: 56px 20px !important; }
  div[style*="padding:72px 32px"] { padding: 48px 20px !important; }
  div[style*="padding:28px 32px 60px"] { padding: 24px 20px 36px !important; }
  div[style*="1.4fr"] > div { padding: 12px 10px !important; font-size: 12.5px !important; }
  header > div { height: auto !important; padding: 10px 16px !important; flex-wrap: wrap !important; gap: 10px !important; }
  header a[href^="tel:"] { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; border: 2px solid var(--gray-800) !important; border-radius: 2px !important; padding: 8px 4px !important; font-size: 14px !important; }
  header img { width: 82vw !important; max-width: 360px !important; height: auto !important; margin: 0 auto !important; }
  header > div > a:first-child { width: 100% !important; display: flex !important; justify-content: center !important; }
  header > div > div { width: 100% !important; display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; align-items: stretch !important; gap: 10px !important; }
  header > div > div > * { min-width: 0 !important; }
  header .ml-btn { font-size: 12.5px !important; padding: 8px 6px !important; white-space: normal !important; line-height: 1.3 !important; width:100% !important; height:100% !important; box-sizing:border-box; }
}