/*
Theme Name: Linardos Law
Theme URI: https://linardoslaw.com/
Author: Linardos Law, PLC
Description: Custom full-site-editing theme for Linardos Law, PLC — Michigan Trial Counsel.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: linardos-law
*/

:root {
  --ivory: #f9f5f0;
  --ivory-deep: #f6f0ea;
  --navy: #0b2948;
  --navy-soft: #163b60;
  --ink: #151b22;
  --muted: #4d5862;
  --rule: rgba(11, 41, 72, 0.15);
  --shell: 1360px;
  --gutter: clamp(24px, 4.2vw, 68px);
  --display: "EB Garamond", Garamond, Georgia, serif;
  --body-serif: "EB Garamond", Garamond, Georgia, serif;
  --sans: "Inter", Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--ivory);
  font-family: var(--body-serif);
  font-size: 18px;
  line-height: 1.48;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.shell { width: min(100%, var(--shell)); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { position: fixed; top: 12px; left: 12px; transform: translateY(-140%); z-index: 100; padding: 10px 14px; background: white; color: var(--navy); font-family: var(--sans); }
.skip-link:focus { transform: none; }

.site-header {
  position: relative;
  z-index: 20;
  background: var(--ivory);
}
.header-inner { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 48px; width: 100%; }
.brand { display: inline-flex; flex-direction: column; align-items: center; flex: 0 0 auto; color: var(--navy); gap: 0; }
.brand-name, .brand-name a, .brand .wp-block-site-title, .brand .wp-block-site-title a {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(29px, 2.4vw, 39px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .015em;
  white-space: nowrap;
  color: var(--navy);
  text-transform: uppercase;
}
.brand-subtitle, .footer-subtitle { display: flex; align-items: center; gap: 14px; margin: 10px 0 0; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .18em; white-space: nowrap; text-transform: uppercase; }
.brand-subtitle i, .footer-subtitle i { display: inline-block; width: 36px; height: 1px; background: currentColor; opacity: .72; }
.desktop-nav { display: flex; align-items: center; gap: clamp(26px, 3.5vw, 58px); }
.mobile-menu { display: none; position: relative; font-family: var(--sans); color: var(--navy); }
.mobile-menu summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu nav { position: absolute; top: 36px; right: 0; display: grid; min-width: 250px; padding: 12px 18px; background: var(--ivory); border: 1px solid var(--rule); box-shadow: 0 12px 35px rgba(11,41,72,.12); z-index: 30; }
.mobile-menu nav a { padding: 11px 4px; border-bottom: 1px solid var(--rule); font-size: 12px; text-transform: uppercase; color: var(--navy); }
.mobile-menu nav a:last-child { border-bottom: 0; }
.desktop-nav a,
.desktop-nav .wp-block-navigation-item__content {
  position: relative;
  padding-block: 12px;
  color: var(--navy) !important;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}
.desktop-nav a:visited,
.desktop-nav .wp-block-navigation-item__content:visited { color: var(--navy) !important; }
.desktop-nav a::after,
.desktop-nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 0;
  height: 2px;
  background: var(--navy);
  transition: width .2s ease;
}
.desktop-nav a:hover::after,
.desktop-nav .wp-block-navigation-item__content:hover::after { width: 40px; }

.hero {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  background: var(--ivory);
  border-bottom: 1px solid var(--rule);
}
.hero .wp-block-cover__background {
  background: linear-gradient(90deg, var(--ivory) 0%, rgba(249,245,240,.88) 10%, rgba(249,245,240,.25) 34%, rgba(249,245,240,0) 55%);
  opacity: 1 !important;
}
.hero-copy {
  width: min(58%, 720px) !important;
  padding-block: 54px 68px !important;
  margin: 0 !important;
  max-width: none !important;
  color: var(--navy);
  text-align: left !important;
}
.hero h1,
.hero .wp-block-heading {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-family: var(--display) !important;
  font-size: clamp(64px, 5.45vw, 88px) !important;
  font-weight: 400 !important;
  line-height: .92 !important;
  letter-spacing: -.018em !important;
  color: var(--navy) !important;
}
.wp-block-separator.short-rule,
hr.short-rule {
  display: block !important;
  width: 38px !important;
  max-width: 38px !important;
  height: 2px !important;
  margin: 34px 0 23px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: var(--navy) !important;
  border: none !important;
  border-bottom: none !important;
  opacity: 1 !important;
}
.hero-copy p {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 650px;
  color: #203043;
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.57;
  font-family: var(--body-serif);
  text-align: left !important;
}
.hero-copy .wp-block-buttons {
  margin: 0 !important;
}
.outline-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 45px; min-width: 250px; margin-top: 34px !important; padding: 16px 22px; border: 1.5px solid var(--navy); background: transparent; }
.outline-button a, .outline-button .wp-block-button__link { color: var(--navy); background: transparent; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; transition: background .2s ease, color .2s ease; padding: 0; }
.outline-button:hover, .outline-button:hover a { background: var(--navy); color: white; }

.section-rule { border-bottom: 1px solid var(--rule); }
.section-shell { padding-top: 34px; padding-bottom: 38px; }
.section-title { margin: 0; color: var(--navy); font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: .17em; text-align: center; text-transform: uppercase; }
.title-rule { width: 31px; height: 2px; margin: 10px auto 25px; background: var(--navy); border: none; opacity: 1; }

.matters .section-shell { padding-top: 29px; padding-bottom: 31px; }
.matter-grid { align-items: stretch; }
.matter-card { min-width: 0; padding: 14px 24px 10px; text-align: center; }
.matter-card + .matter-card { border-left: 1px solid var(--rule); }
.matter-card img { width: auto; height: 58px; margin: 0 auto 22px; object-fit: contain; }
.matter-card h3 { min-height: 50px; margin: 0 0 18px; color: var(--navy); font-family: var(--sans); font-size: clamp(13px, 1.1vw, 16px); font-weight: 600; letter-spacing: .035em; line-height: 1.48; text-transform: uppercase; }
.matter-card p { margin: 0 auto; max-width: 215px; color: #25292e; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.55; }

.about .section-shell { padding-top: 27px; padding-bottom: 20px; }
.about-copy { max-width: 830px; margin-inline: auto; text-align: center; }
.about-copy .title-rule { margin-bottom: 17px; }
.about-copy > p:not(.education) { margin: 0; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.5; }
.education { display: flex; justify-content: center; gap: 14px; margin: 17px 0 29px; color: var(--navy-soft); font-size: 16px; }
.education a:hover { text-decoration: underline; text-underline-offset: 3px; }
.recognition { border-top: 1px solid var(--rule); padding-top: 14px; }
.recognition .title-rule { margin-bottom: 15px; }
.recognition-grid { width: 100%; }
.recognition-item { display: grid; grid-template-columns: 105px minmax(0, 1fr); align-items: center; gap: 18px; min-width: 0; min-height: 118px; padding: 4px 34px; }
.recognition-item + .recognition-item { border-left: 1px solid var(--rule); }
.badge-link { display: grid; place-items: center; min-height: 90px; margin: 0; }
.badge-link img { max-width: 91px; max-height: 85px; object-fit: contain; margin: 0 auto; }
.recognition-item p { margin: 0 0 8px; font-size: 16px; line-height: 1.35; }
.profile-link a { color: var(--navy); font-size: 15px; }
.profile-link span { margin-left: 8px; }
.profile-link a:hover { text-decoration: underline; text-underline-offset: 3px; }
.recognition-note { margin: 6px 0 0; color: #60666b; font-size: 13px; font-style: italic; text-align: center; }

.referrals { background: rgba(255,255,255,.08); }
.referral-inner { align-items: center; min-height: 128px; padding-top: 16px; padding-bottom: 16px; }
.referral-icon { display: grid; place-items: center; height: 86px; border-right: 1px solid var(--rule); }
.referral-icon img { width: 76px; height: auto; margin: 0 auto; }
.referral-copy { padding-left: 44px; }
.referral-copy h2 { margin: 0; color: var(--navy); font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.short-rule.small { width: 28px !important; max-width: 28px !important; height: 2px !important; margin: 9px 0 8px !important; }
.referral-copy p { margin: 0 0 6px; font-size: 16px; line-height: 1.43; }
.referral-copy > p > a { color: var(--navy); font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.referral-copy > p > a span { margin-left: 12px; }

.site-footer { background: linear-gradient(105deg, #092743 0%, #0d3154 100%); color: white; }
.footer-grid { align-items: center; min-height: 135px; padding-top: 22px; padding-bottom: 18px; }
.footer-grid > * { border-left: 1px solid rgba(255,255,255,.31); }
.footer-grid > *:first-child { border-left: 0; }
.footer-brand { padding-right: 54px; text-align: center; }
.footer-name { font-family: var(--display); font-size: clamp(25px, 2.1vw, 33px); line-height: 1; white-space: nowrap; margin: 0; }
.footer-subtitle { justify-content: center; margin-top: 12px; font-size: 11px; }
.footer-subtitle i { width: 31px; }
.footer-contact { display: grid; gap: 5px; margin: 0; padding: 0 48px; }
.footer-contact p { margin: 0; }
.footer-contact a { display: grid; grid-template-columns: 24px 1fr; align-items: start; gap: 10px; font-size: 16px; line-height: 1.35; }
.footer-contact a:hover, .footer-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-contact a > span:first-child { color: #e2b867; font-family: Arial, sans-serif; text-align: center; }
.footer-meta { padding-left: 58px; }
.footer-meta a { color: #f1d18a; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .15em; }
.footer-meta p { margin: 12px 0 0; font-size: 16px; }
.copyright { margin: 0; padding: 0 20px 16px; color: rgba(255,255,255,.67); font-size: 13px; letter-spacing: .03em; text-align: center; }

@media (max-width: 1180px) {
  :root { --gutter: 36px; }
  .desktop-nav { gap: 24px; }
  .matter-card { padding-inline: 15px; }
  .matter-card h3 { font-size: 13px; }
  .matter-card p { font-size: 14px; }
  .recognition-item { grid-template-columns: 90px 1fr; gap: 13px; padding-inline: 20px; }
  .recognition-item p { font-size: 14px; }
  .footer-contact { padding-inline: 35px; }
  .footer-meta { padding-left: 40px; }
}

@media (max-width: 960px) {
  .brand-name, .brand-name a { font-size: 30px; }
  .desktop-nav { display: none; }
  .mobile-menu { display: block; }
  .hero { min-height: 610px; }
  .hero-copy { width: 70%; }
  .hero h1 { font-size: clamp(58px, 8vw, 76px); }
  .matter-grid.wp-block-columns { flex-wrap: wrap; }
  .matter-card { padding: 28px 28px 34px; flex-basis: 50% !important; }
  .matter-card + .matter-card { border-left: none; }
  .matter-card:nth-child(even) { border-left: 1px solid var(--rule); }
  .matter-card:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .matter-card:last-child { flex-basis: 100% !important; width: 50%; margin-inline: auto; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }
  .matter-card h3 { font-size: 15px; }
  .matter-card p { font-size: 16px; }
  .recognition-grid.wp-block-columns { flex-wrap: wrap; max-width: 660px; margin-inline: auto; }
  .recognition-item { flex-basis: 100% !important; grid-template-columns: 115px 1fr; min-height: 105px; padding: 12px 28px; }
  .recognition-item + .recognition-item { border-left: 0; border-top: 1px solid var(--rule); }
  .recognition-item p { font-size: 16px; }
  .referral-inner.wp-block-columns { flex-wrap: wrap; }
  .referral-icon { flex-basis: 100% !important; }
  .referral-copy { flex-basis: 100% !important; padding-left: 32px; }
  .footer-grid.wp-block-columns { flex-wrap: wrap; }
  .footer-brand, .footer-contact { flex-basis: 50% !important; }
  .footer-meta { flex-basis: 100% !important; padding: 18px 0 0; margin-top: 18px; border-left: 0 !important; border-top: 1px solid rgba(255,255,255,.22); text-align: center; }
}

@media (max-width: 680px) {
  :root { --gutter: 22px; }
  body { font-size: 17px; }
  .brand { align-items: flex-start; }
  .brand-name, .brand-name a { font-size: 25px; }
  .brand-subtitle { gap: 8px; margin-top: 7px; font-size: 9px; letter-spacing: .14em; }
  .brand-subtitle i { width: 20px; }
  .hero { min-height: 610px; }
  .hero-copy { width: 100%; padding-top: 30px; }
  .hero h1 { font-size: clamp(53px, 14.5vw, 70px); line-height: .96; }
  .hero-copy p { font-size: 18px; }
  .outline-button { min-width: 220px; margin-top: 30px !important; }
  .matter-grid.wp-block-columns, .matter-card { flex-basis: 100% !important; }
  .matter-card, .matter-card:last-child { width: 100%; padding: 30px 32px; border: 0 !important; border-top: 1px solid var(--rule) !important; }
  .matter-card:first-child { border-top: 0 !important; }
  .matter-card p { max-width: 360px; }
  .about-copy > p:not(.education) { font-size: 17px; }
  .education { flex-wrap: wrap; gap: 5px 9px; font-size: 14px; }
  .recognition-item { grid-template-columns: 90px 1fr; gap: 14px; padding-inline: 8px; }
  .recognition-item p { font-size: 15px; }
  .recognition-note { font-size: 12px; }
  .referral-inner.wp-block-columns { text-align: center; padding-block: 30px; }
  .referral-icon { height: auto; padding-bottom: 18px; border-right: 0; }
  .referral-copy { padding-left: 0; }
  .short-rule.small { margin-inline: auto; }
  .footer-grid.wp-block-columns { text-align: center; padding-top: 30px; }
  .footer-grid > * { border-left: 0 !important; border-top: 1px solid rgba(255,255,255,.22); }
  .footer-grid > *:first-child { border-top: 0; }
  .footer-brand, .footer-contact, .footer-meta { flex-basis: 100% !important; }
  .footer-brand { padding: 0 0 24px; }
  .footer-contact { padding: 22px 0; justify-content: center; text-align: left; }
  .footer-meta { margin: 0; padding: 22px 0 0; }
  .copyright { padding-top: 18px; }
}