/*
Theme Name: Oral Wellness Center Child
Theme URI: https://oralwellnesscharlottesville.com
Description: Child theme of Hello Elementor. Adds a custom Patient Education (blog archive) template for Oral Wellness Center of Charlottesville.
Author: Mad Rose Media
Author URI: https://madrosemedia.com
Template: hello-elementor
Version: 1.0.0
Text Domain: owcc-child
*/

/* IMPORTANT: "Template:" above must exactly match your parent theme's
   folder name in /wp-content/themes/. Hello Elementor is usually
   "hello-elementor" — check your folder name and adjust if different. */

:root{
  --navy:#0a1f1a;
  --blue:#58788d;
  --blue-dark:#456375;
  --tan:#ceb8aa;
  --cream:#f7f5f2;
  --line:#e3ddd6;
  --white:#ffffff;
  --ink:#222222;
}

/* ---------- BASE ---------- */
.owcc-journal *{ box-sizing:border-box; }
.owcc-journal{
  font-family:'Tenor Sans', sans-serif;
  color:var(--ink);
  background:var(--white);
}
.owcc-journal h1,
.owcc-journal h2,
.owcc-journal h3,
.owcc-journal h4{
  font-family:'Playfair Display', serif;
  margin:0;
  color:var(--navy) !important;
  font-weight:500;
}
.owcc-journal a{ text-decoration:none; color:inherit; }
.owcc-journal img{ max-width:100%; display:block; }
.owcc-journal .container{ max-width:1280px; margin:0 auto; padding:0 40px; }

/* ---------- HERO ---------- */
.journal-hero{
  position:relative !important;
  padding:96px 0 80px !important;
  text-align:center;
  overflow:hidden;
  background:
    linear-gradient(50deg, rgba(206,184,170,.55) 5%, rgba(88,120,141,.75) 80%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px) !important;
  background-color:var(--blue-dark) !important;
}
.journal-hero .eyebrow{
  font-size:13px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--white) !important;
  opacity:.85;
  margin-bottom:18px;
}
.journal-hero h1{
  color:var(--white) !important;
  font-size:56px;
  line-height:1.08;
}
.journal-hero h1 em{
  font-style:italic;
  color:var(--tan) !important;
}
.journal-hero p{
  max-width:620px;
  margin:22px auto 0;
  color:rgba(255,255,255,.92) !important;
  font-size:19px;
  line-height:1.6;
}

/* ---------- FILTER PILLS ---------- */
.filters{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin:-28px auto 56px;
  padding:0 40px;
  position:relative;
  z-index:2;
}
.filters a{
  font-family:'Playfair Display', serif;
  font-size:15px;
  letter-spacing:.3px;
  background:var(--white);
  border:1px solid var(--line);
  color:var(--navy);
  padding:11px 22px;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(10,31,26,.06);
  transition:all .2s ease;
  display:inline-block;
}
.filters a.active,
.filters a:hover{
  background:var(--blue);
  border-color:var(--blue);
  color:var(--white);
}

/* ---------- FEATURED POST ---------- */
.featured{ margin:0 0 88px; }
.featured .card{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  border:1px solid var(--line);
  overflow:hidden;
}
.featured .media{
  min-height:420px;
  background:linear-gradient(160deg, rgba(88,120,141,.9), rgba(206,184,170,.75));
  position:relative;
}
.featured .media::after{
  content:"Featured Photograph";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.75);
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
}
.featured .content{
  padding:56px 56px 48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ---------- SHARED CARD BITS ---------- */
.tag{
  display:inline-block;
  font-size:12px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--blue);
  border:1px solid var(--blue);
  border-radius:999px;
  padding:6px 14px;
  margin-bottom:20px;
  width:fit-content;
}
.owcc-journal .excerpt{
  color:#4c4c4c;
  font-size:16.5px;
  line-height:1.7;
  margin-bottom:26px;
}
.owcc-journal .meta{
  font-size:13px;
  letter-spacing:.4px;
  color:#8a8a8a;
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}
.owcc-journal .meta .dot{ width:4px; height:4px; border-radius:50%; background:#c8c8c8; }
.owcc-journal .featured h2{ font-size:34px; line-height:1.25; margin-bottom:16px; }
.read-link{
  margin-top:26px;
  font-family:'Playfair Display', serif;
  font-size:15px;
  letter-spacing:.3px;
  color:var(--navy);
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid var(--navy);
  padding-bottom:2px;
  width:fit-content;
}

/* ---------- POST GRID ---------- */
.grid-heading{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:32px; }
.grid-heading h3{
  font-size:15px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--blue);
  font-family:'Tenor Sans', sans-serif;
}
.post-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
  margin-bottom:70px;
}
.post-card .media{
  height:230px;
  margin-bottom:22px;
  background:linear-gradient(160deg, #e7ddd4, #c9d3d8);
  position:relative;
  overflow:hidden;
}
.post-card .media::after{
  content:"Post Photograph";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(10,31,26,.35);
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
}
.post-card h4{ font-size:22px; line-height:1.35; margin-bottom:10px; }
.post-card .excerpt{ font-size:15px; margin-bottom:16px; }
.post-card .meta{ font-size:12px; }

/* Real featured images: hide the placeholder label and cover the box */
.media.has-image::after{ content:none; }
.media.has-image img,
.featured .media.has-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
}

/* ---------- CTA BAND ---------- */
.cta-band{
  position:relative;
  padding:90px 40px !important;
  text-align:center;
  color:var(--white) !important;
  background:
    linear-gradient(rgba(10,31,26,.55), rgba(10,31,26,.55)),
    linear-gradient(135deg, #58788d, #ceb8aa) !important;
  margin-bottom:90px;
}
.cta-band h2{ color:var(--white) !important; font-size:34px; max-width:760px; margin:0 auto 18px; line-height:1.3; }
.cta-band h2 em{ color:var(--tan) !important; font-style:italic; }
.cta-band p{ max-width:560px; margin:0 auto 30px; font-size:17px; color:rgba(255,255,255,.9) !important; }
.btn{
  display:inline-block;
  background:var(--blue) !important;
  color:var(--white) !important;
  font-family:'Playfair Display', serif;
  font-size:16px;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding:15px 30px;
  border:none;
  cursor:pointer;
}
.btn:hover{ background:var(--blue-dark); color:var(--white); }

/* ---------- PAGINATION (styles WordPress' default paginate_links markup) ---------- */
.pagination{ margin:0 0 100px; text-align:center; }
.pagination ul.page-numbers{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  list-style:none;
  padding:0;
  margin:0;
  flex-wrap:wrap;
  font-family:'Playfair Display', serif;
}
.pagination .page-numbers li{ display:flex; }
.pagination a.page-numbers,
.pagination span.page-numbers{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:50%;
  font-size:14px;
  color:var(--navy);
}
.pagination span.page-numbers.current{ background:var(--blue); border-color:var(--blue); color:#fff; }
.pagination a.next.page-numbers,
.pagination a.prev.page-numbers{
  width:auto;
  border:none;
  border-radius:0;
  font-size:14px;
  letter-spacing:1px;
  color:var(--blue);
  background:none;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .featured .card{ grid-template-columns:1fr; }
  .post-grid{ grid-template-columns:1fr 1fr; }
  .journal-hero h1{ font-size:40px; }
}
@media (max-width: 620px){
  .post-grid{ grid-template-columns:1fr; }
  .owcc-journal .container{ padding:0 22px; }
  .featured .content{ padding:36px 28px; }
}

/* =========================================================
   SINGLE POST TEMPLATE
   ========================================================= */

/* ---------- POST HERO ---------- */
/* Box model, background, and H1/dek color are now set inline in single.php
   for bulletproof rendering — see the comment there. This block only
   carries decorative refinements layered on top. */
.owcc-single .post-hero{
  overflow:hidden;
}
.post-hero-vignette{
  position:relative;
  width:100%;
  min-height:540px;
  display:flex;
  align-items:flex-end;
  /* Brand duotone — navy/teal instead of a generic black fade, so a photo
     reads as this practice's, not a stock dark-overlay-hero default. */
  background:
    linear-gradient(160deg, rgba(10,31,26,.55) 0%, rgba(88,120,141,.5) 55%, rgba(206,184,170,.25) 100%),
    radial-gradient(120% 100% at 50% 100%, rgba(10,31,26,.2) 0%, rgba(10,31,26,.6) 100%);
}
.owcc-single .post-hero-overlay{
  position:relative;
  width:100%;
  padding:200px 0 90px;
  background:linear-gradient(to top, rgba(10,31,26,.94), rgba(10,31,26,.4) 55%, rgba(10,31,26,.08) 100%);
}
/* Fine diagonal texture, echoed from the archive hero, laid over the
   overlay at low opacity so a real photo still gets this practice's
   signature texture instead of a flat commodity tint. */
.owcc-single .post-hero-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 28px);
  pointer-events:none;
}
.owcc-single .post-hero.has-image .post-hero-overlay{ padding-top:230px; }
.owcc-single .post-hero-top{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:30px;
  padding-top:14px;
  border-top:1px solid rgba(206,184,170,.5);
}
.owcc-single .back-link{
  display:inline-block;
  font-size:12px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.8) !important;
  border-bottom:none;
  padding-bottom:0;
}
.owcc-single .back-link:hover{ color:#fff !important; }
.owcc-single .tag--on-dark{
  background:var(--tan) !important;
  border-color:var(--tan) !important;
  color:var(--navy) !important;
  font-weight:600;
  margin-bottom:0;
}
.owcc-single .post-hero h1{
  position:relative;
  font-size:54px;
  line-height:1.12;
  max-width:820px;
  margin-bottom:22px;
  text-shadow:0 2px 28px rgba(0,0,0,.3);
}
.owcc-single .post-dek{
  position:relative;
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-size:21px;
  line-height:1.55;
  max-width:620px;
  margin:0;
}

/* ---------- FLOATING META CARD ---------- */
.owcc-single .post-meta-card{
  max-width:640px;
  margin:-38px auto 0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
  position:relative;
  z-index:3;
  background:var(--white) !important;
  border-radius:3px;
  box-shadow:0 18px 44px rgba(10,31,26,.14);
  padding:20px 36px !important;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  font-size:14px;
  letter-spacing:.3px;
  color:#555 !important;
}
.owcc-single .post-meta-card .tag{ margin-bottom:0; }
.owcc-single .post-meta-card .dot{ width:4px; height:4px; border-radius:50%; background:#c8c8c8; }

/* ---------- FEATURED IMAGE (clean, full view below the hero) ---------- */
.post-featured-image{
  max-width:880px;
  margin:44px auto 0;
}
.post-featured-image img{
  width:100%;
  height:auto;
  border-radius:3px;
  display:block;
  box-shadow:0 10px 30px rgba(10,31,26,.08);
}

/* ---------- POST BODY TYPOGRAPHY ---------- */
.post-content-wrap{ max-width:760px; margin:56px auto 0; }
.entry-content{
  font-size:18px;
  line-height:1.8;
  color:#2c2c2c;
}
.entry-content p{ margin:0 0 26px; }
.entry-content > p:first-of-type::first-letter{
  font-family:'Playfair Display', serif;
  font-weight:600;
  font-size:68px;
  line-height:.78;
  float:left;
  padding:4px 10px 0 0;
  color:var(--tan);
}
.entry-content h2{
  font-size:30px;
  margin:56px 0 20px;
  line-height:1.3;
}
.entry-content h2::before{
  content:"\2726";
  display:block;
  font-size:14px;
  color:var(--tan);
  margin-bottom:12px;
}
.entry-content h3{ font-size:23px; margin:40px 0 16px; line-height:1.3; }
.entry-content ul,
.entry-content ol{ margin:0 0 26px; padding-left:22px; }
.entry-content li{ margin-bottom:10px; }
.entry-content blockquote{
  position:relative;
  margin:44px 0;
  padding:4px 0 4px 44px;
  border-left:3px solid var(--tan);
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-size:23px;
  line-height:1.5;
  color:var(--navy);
}
.entry-content blockquote::before{
  content:"\201C";
  position:absolute;
  left:6px;
  top:-6px;
  font-family:'Playfair Display', serif;
  font-size:46px;
  font-style:normal;
  color:var(--tan);
  opacity:.6;
}
.entry-content img{ margin:32px 0; }
.entry-content a{ color:var(--blue); border-bottom:1px solid var(--blue); }
.page-links{ margin:30px 0; font-size:14px; }

/* ---------- PREV / NEXT POST NAV ---------- */
.post-nav{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin:56px 0 90px;
  padding-top:28px;
  border-top:1px solid var(--line);
  font-family:'Playfair Display', serif;
  font-size:15px;
}
.post-nav a{ color:var(--navy); }
.post-nav a:hover{ color:var(--blue); }
.post-nav-next{ text-align:right; }

@media (max-width: 620px){
  .post-hero h1{ font-size:34px; }
  .post-hero-vignette{ min-height:380px; }
  .post-hero-overlay{ padding:130px 0 60px; }
  .post-meta-card{ padding:16px 20px; margin-top:-28px; }
  .entry-content > p:first-of-type::first-letter{ font-size:52px; }
  .post-nav{ flex-direction:column; gap:12px; }
  .post-nav-next{ text-align:left; }
}