/*
Theme Name: Meridian Eye Co.
Theme URI: https://meridianeyeco.com
Author: Meridian Studio
Author URI: https://meridianeyeco.com
Description: Custom optometry practice theme for Meridian Eye Co. Dark navy / beige / white palette, Frank Ruhl Libre + Jost typography, meridian-axis motif throughout.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meridian-eye
*/

:root{
  --navy: #152334;
  --navy-soft: #223751;
  --beige: #dac89d;
  --beige-pale: #f4efe4;
  --white: #ffffff;
  --max: 1180px;

  --shadow-sm: 0 6px 18px rgba(21,35,52,0.07);
  --shadow-md: 0 20px 46px rgba(21,35,52,0.14);
  --shadow-lg: 0 30px 70px rgba(21,35,52,0.22);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Jost', sans-serif;
  color:var(--navy);
  background:var(--white);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:'Frank Ruhl Libre', serif; font-weight:500; letter-spacing:-0.01em; }
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img,svg{display:block;max-width:100%;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}

.eyebrow{ display:flex; align-items:center; gap:14px; font-size:12.5px; letter-spacing:0.22em; text-transform:uppercase; font-weight:500; margin-bottom:22px; }
.eyebrow .tick{ width:34px; height:1px; background:currentColor; opacity:0.55; }

a:focus-visible, button:focus-visible{ outline:2px solid var(--beige); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* NAV */
header.site-nav{ position:sticky; top:0; z-index:100; background:rgba(21,35,52,0.96); backdrop-filter:blur(6px); border-bottom:1px solid rgba(218,200,157,0.18); }
.nav-inner{ max-width:var(--max); margin:0 auto; padding:18px 32px; display:flex; align-items:center; justify-content:space-between; }
.logo{ display:flex; align-items:center; gap:10px; font-family:'Frank Ruhl Libre', serif; font-size:19px; color:var(--white); letter-spacing:0.01em; }
.logo .mark{ width:26px; height:26px; border:1px solid var(--beige); position:relative; flex:none; }
.logo .mark::before, .logo .mark::after{ content:""; position:absolute; background:var(--beige); }
.logo .mark::before{ top:50%; left:12%; right:12%; height:1px; transform:translateY(-50%); }
.logo .mark::after{ left:50%; top:12%; bottom:12%; width:1px; transform:translateX(-50%); }

.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{ color:rgba(255,255,255,0.82); font-size:14px; letter-spacing:0.02em; transition:color 0.2s ease; }
.nav-links a:hover{color:var(--beige);}
.nav-cta{ white-space:nowrap; }
.menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.menu-toggle span{width:22px; height:1px; background:var(--white);}

/* HERO */
.hero{ background:var(--navy); color:var(--white); position:relative; overflow:hidden; }
.hero-inner{ max-width:var(--max); margin:0 auto; padding:96px 32px 110px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center; }
.hero .eyebrow{color:var(--beige);}
.hero h1{ font-size:clamp(36px, 5vw, 58px); line-height:1.08; color:var(--white); max-width:14ch; margin-bottom:26px; }
.hero h1 em{ color:var(--beige); font-style:normal; }
.hero p.lede{ font-size:17px; color:rgba(255,255,255,0.72); max-width:46ch; margin-bottom:38px; }
.btn-row{ display:flex; gap:16px; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 28px; font-size:14px; letter-spacing:0.03em; font-weight:500; transition:all 0.2s ease; cursor:pointer; }
.btn-primary{ background:var(--beige); color:var(--navy); border:1px solid var(--beige); }
.btn-primary:hover{ background:transparent; color:var(--beige); }
.btn-ghost{ background:transparent; color:var(--white); border:1px solid var(--beige); }
.btn-ghost:hover{ background:var(--beige); color:var(--navy); border-color:transparent; }

/* Header CTA button — same look as the hero's ghost button: transparent
   background, theme (beige) border, no border on hover. Higher specificity
   (.btn.nav-cta) so it overrides .btn-primary regardless of which class
   ends up on the menu item. */
.btn.nav-cta{ background:transparent; color:var(--white); border:1px solid var(--beige); }
.btn.nav-cta:hover{ background:var(--beige); color:var(--navy); border-color:transparent; }
.hero-visual{ display:flex; justify-content:center; align-items:center; width:100%; }
.hero-frame{
  position:relative; width:100%; padding-top:66%;
  overflow:hidden;
  box-shadow:var(--shadow-lg); border:1px solid rgba(218,200,157,0.25);
  background:var(--navy-soft);
}
.hero-frame img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; }
.dial-caption{ text-align:center; margin-top:18px; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.45); }
.axis-line{ transform-origin:150px 150px; animation:settle 2.4s cubic-bezier(.2,.8,.2,1) 1; }
@keyframes settle{ from{ transform:rotate(-40deg); opacity:0; } to{ transform:rotate(0deg); opacity:1; } }

/* SECTIONS */
section{ padding:100px 0; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(28px,3.6vw,40px); color:var(--navy); }
.section-head p{ color:rgba(21,35,52,0.65); font-size:16px; margin-top:16px; max-width:56ch; }

.about{ background:var(--white); }
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.about p{ color:rgba(21,35,52,0.75); margin-bottom:18px; font-size:16px; max-width:50ch; }
.about-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px; }
.stat{ border-top:1px solid var(--beige); padding-top:14px; }
.stat .num{ font-family:'Frank Ruhl Libre',serif; font-size:30px; color:var(--navy); }
.stat .label{ font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(21,35,52,0.55); margin-top:4px;}
.about-art{
  position:relative; width:100%; padding-top:68%;
  background:var(--beige-pale); border:1px solid var(--beige);
  overflow:hidden; box-shadow:var(--shadow-sm);
}
.about-art img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }

.doctors{ background:var(--beige-pale); }
.doctor-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.doctor-card{ background:var(--white); border:1px solid rgba(21,35,52,0.08); padding:36px 30px 32px; box-shadow:var(--shadow-sm); transition:transform 0.25s ease, box-shadow 0.25s ease; overflow:hidden; }
.doctor-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.doc-photo{ width:100%; padding-top:118%; overflow:hidden; margin-bottom:22px; position:relative; box-shadow:var(--shadow-sm); }
.doc-photo img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; }
.doctor-card h3{ font-size:19px; color:var(--navy); margin-bottom:4px; }
.doctor-card .cred{ font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--beige); background:var(--navy); display:inline-block; padding:5px 14px; margin-bottom:16px; }
.doctor-card p{ font-size:14.5px; color:rgba(21,35,52,0.7); }

.services{ background:var(--white); }
.service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(21,35,52,0.1); border:1px solid rgba(21,35,52,0.1); overflow:hidden; }
.service-card{ background:var(--white); padding:40px 32px; transition:background 0.2s ease; }
.service-card:hover{ background:var(--beige-pale); }
.service-icon-wrap{ width:56px; height:56px; min-width:56px; min-height:56px; overflow:hidden; background:var(--beige-pale); display:flex; align-items:center; justify-content:center; margin-bottom:26px; }
.service-icon{ width:26px; height:26px; max-width:26px; max-height:26px; }
.service-card h3{ font-size:20px; color:var(--navy); margin-bottom:12px; }
.service-card p{ font-size:14.5px; color:rgba(21,35,52,0.68); margin-bottom:20px; }
.service-link{ font-size:13px; letter-spacing:0.04em; color:var(--navy); border-bottom:1px solid var(--beige); padding-bottom:2px; display:inline-block; transition:transform 0.2s ease; }
.service-link:hover{ transform:translateX(3px); }

.insurance{ background:var(--navy); color:var(--white); }
.insurance .eyebrow{ color:var(--beige); }
.insurance .section-head p{ color:rgba(255,255,255,0.62); }
.insurance .section-head h2{ color:var(--white); }
.insurance-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.insurance-card{
  display:flex; align-items:center; gap:12px;
  border:1px solid rgba(218,200,157,0.28);
  background:rgba(255,255,255,0.03);
  
  padding:18px 20px;
  transition:border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.insurance-card:hover{ border-color:var(--beige); background:rgba(218,200,157,0.08); transform:translateY(-2px); }
.insurance-icon{ width:22px; height:22px; min-width:22px; min-height:22px; max-width:22px; max-height:22px; flex:none; overflow:hidden; }
.insurance-card span{ font-size:14.5px; letter-spacing:0.01em; color:rgba(255,255,255,0.9); line-height:1.3; }
.badge:hover{ border-color:var(--beige); color:var(--beige); }
.insurance-note{ margin-top:32px; font-size:14px; color:rgba(255,255,255,0.5); max-width:56ch; }

.location{ background:var(--beige-pale); }
.loc-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:stretch; }
.loc-details h3{ font-size:22px; color:var(--navy); margin-bottom:18px; }
.loc-line{ display:flex; gap:14px; font-size:15px; color:rgba(21,35,52,0.75); margin-bottom:14px; }
.loc-line strong{ color:var(--navy); font-weight:500; min-width:78px; display:inline-block; }
.loc-hours{ margin-top:26px; border-top:1px solid var(--beige); padding-top:20px; }
.loc-hours .row{ display:flex; justify-content:space-between; font-size:14.5px; padding:6px 0; color:rgba(21,35,52,0.72); }
.loc-hours .row span:last-child{ color:var(--navy); font-weight:500; }
.map-placeholder{ background:var(--navy); position:relative; overflow:hidden; min-height:340px; display:flex; align-items:flex-end; padding:28px; box-shadow:var(--shadow-sm); }
.map-placeholder img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity:0.9; }
.map-placeholder::after{ content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(180deg, rgba(21,35,52,0) 40%, rgba(21,35,52,0.85) 100%); }
.map-placeholder .pin-label{ color:var(--white); position:relative; z-index:2; }
.map-placeholder .pin-label .eyebrow{ color:var(--beige); }
.map-placeholder .pin-label strong{ font-family:'Frank Ruhl Libre',serif; font-size:20px; display:block; }

footer{ background:var(--navy); color:rgba(255,255,255,0.6); }
.footer-inner{ max-width:var(--max); margin:0 auto; padding:56px 32px 36px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; }
.footer-brand .logo{ margin-bottom:14px; }
.footer-brand p{ font-size:14px; max-width:32ch; color:rgba(255,255,255,0.45); }
.footer-tagline{ font-family:'Frank Ruhl Libre', serif; font-style:italic; font-size:16px; color:var(--beige); margin:12px 0 10px; max-width:none; }
.footer-book-note{ font-size:14px; color:rgba(255,255,255,0.55); max-width:26ch; margin-bottom:18px; }
.footer-book .btn-primary{ display:inline-flex; }
.footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.footer-col h4{ font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--beige); margin-bottom:16px; font-weight:500; }
.footer-col a, .footer-col span{ display:block; font-size:14.5px; margin-bottom:10px; color:rgba(255,255,255,0.65); }
.footer-col a:hover{ color:var(--beige); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.1); padding:22px 32px; font-size:12.5px; color:rgba(255,255,255,0.35); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* GENERIC PAGE (for new pages made in WP editor) */
.page-hero{ background:var(--navy); color:var(--white); padding:80px 0 60px; }
.page-hero h1{ font-size:clamp(32px,4.5vw,48px); color:var(--white); }
.page-content{ padding:80px 0; }
.page-content .wrap{ max-width:820px; }
.page-content h2{ font-size:28px; margin:36px 0 14px; color:var(--navy); }
.page-content p{ font-size:16px; color:rgba(21,35,52,0.75); margin-bottom:18px; }
.page-content ul{ margin:0 0 18px 20px; list-style:disc; }
.page-content ul li{ margin-bottom:8px; color:rgba(21,35,52,0.75); }
.page-content img{ margin:24px 0; border:1px solid var(--beige); }

/* RESPONSIVE */

/* Tablets: use 2-column grids instead of jumping straight to 1 column */
@media (max-width:1024px) and (min-width:769px){
  .doctor-grid{ grid-template-columns:repeat(2, 1fr); }
  .service-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; padding-top:56px; }
  .hero-visual{ max-width:100%; width:100%; margin:32px auto 0; }
  .about-grid{ grid-template-columns:1fr; }
  .about-art{ max-width:100%; width:100%; margin:0 auto; }
  .doctor-grid{ grid-template-columns:repeat(2, 1fr); }
  .service-grid{ grid-template-columns:1fr; }
  .insurance-grid{ grid-template-columns:repeat(2, 1fr); }
  .loc-grid{ grid-template-columns:1fr; }
  .nav-links{ position:fixed; inset:64px 0 auto 0; background:var(--navy); flex-direction:column; align-items:flex-start; gap:0; padding:8px 32px 24px; border-bottom:1px solid rgba(218,200,157,0.18); transform:translateY(-120%); transition:transform 0.3s ease; z-index:99; }
  .nav-links.open{ transform:translateY(0); }
  .nav-links a:not(.nav-cta){ padding:14px 0; width:100%; border-bottom:1px solid rgba(255,255,255,0.06); }
  .nav-links .nav-cta{
    align-self:center;
    justify-content:center;
    text-align:center;
    margin-top:18px;
    width:auto;
  }
  .menu-toggle{ display:flex; }
  section{ padding:72px 0; }
}
@media (max-width:640px){
  .doctor-grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .wrap, .hero-inner, .nav-inner, .footer-inner{ padding-left:20px; padding-right:20px; }
  .about-stats{ grid-template-columns:1fr; }
  .insurance-grid{ grid-template-columns:1fr; }
  .doctor-card{ padding:28px 22px 26px; }
  .service-card{ padding:32px 24px; }
  section{ padding:52px 0; }
  .hero-inner{ padding-top:44px; padding-bottom:56px; }

  /* Keep hero buttons side-by-side (inline) instead of stacking on small phones */
  .btn-row{ flex-wrap:nowrap; gap:10px; }
  .btn-row .btn{ flex:1; padding:13px 12px; font-size:12.5px; gap:6px; white-space:nowrap; justify-content:center; }
}