/*
Theme Name:  Hello Elementor Child
Theme URI:   https://oscarmullercreel.com
Description: Child theme of Hello Elementor for Dr. Oscar Antonio Müller Creel — restyle built to the approved prototype. All brand styling lives here so content stays editable in Elementor without touching design. Do not edit the parent theme.
Author:      Oscar Müller Creel site
Author URI:  https://oscarmullercreel.com
Template:    hello-elementor
Version:     1.0.0
Requires PHP: 7.4
Text Domain: hello-elementor-child
*/

/* =====================================================================
   Design tokens — single source of truth for the brand palette,
   type families and layout. Mirrors the approved prototype and the
   Elementor Global Kit so both hand-written CSS and Elementor widgets
   resolve to the same values.
   ===================================================================== */
:root{
  /* Palette */
  --navy:#152238;
  --navy-deep:#0e192b;
  --cream:#efe9dc;
  --cream-light:#f6f2e9;
  --paper:#faf8f3;
  --gold:#b08d49;
  --gold-soft:#c9a86a;
  --ink:#1c2431;
  --muted:#5c6472;
  --line:rgba(21,34,56,0.14);

  /* Type */
  --display:"Fraunces",Georgia,serif;   /* headings / display */
  --serif:"Newsreader",Georgia,serif;   /* body */
  --sans:"Inter",system-ui,sans-serif;  /* nav / utility / labels */

  /* Layout */
  --maxw:1120px;
}

/* =====================================================================
   Base typography — applied site-wide so non-Elementor output (blog
   post bodies, comments, plugin markup) inherits the brand look too.
   Elementor sections set their own colors via the Global Kit.
   ===================================================================== */
body{
  font-family:var(--serif);
  color:var(--ink);
  background:var(--paper);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--display);
  font-weight:500;
  color:var(--navy);
  letter-spacing:-0.01em;
}

/* =====================================================================
   TASK 3 — Component polish ported from the approved prototype.
   Reusable .oscar-* classes are applied to Elementor widgets via the
   "CSS Classes" field in the Theme Builder templates. Generic rules
   also enhance Elementor's own nav/links/focus site-wide (blog posts).
   ===================================================================== */

/* ---- Layout + section heads ---------------------------------------- */
.oscar-wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:32px}
.oscar-eyebrow{font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.oscar-rule{width:56px;height:2px;background:var(--gold);margin:20px auto 0}

/* ---- Header nav: gold underline grows on hover --------------------- */
/* Applied via .oscar-nav on the header's Nav Menu widget.              */
.oscar-nav .elementor-item,
.oscar-nav a.oscar-navlink{position:relative;color:var(--ink)!important;
  font-family:var(--sans);font-weight:500;font-size:14.5px;
  padding:4px 0!important;transition:color .2s}
.oscar-nav .elementor-item::after,
.oscar-nav a.oscar-navlink::after{content:"";position:absolute;left:0;bottom:-2px;
  width:0;height:1.5px;background:var(--gold);transition:width .25s ease}
.oscar-nav .elementor-item:hover,
.oscar-nav a.oscar-navlink:hover{color:var(--navy)!important;background:transparent!important}
.oscar-nav .elementor-item:hover::after,
.oscar-nav a.oscar-navlink:hover::after{width:100%}
/* Remove Elementor's default nav underline/borders that would clash */
.oscar-nav .elementor-item:before{display:none}

/* ---- CTA (bordered → fills navy) ----------------------------------- */
.oscar-cta,.oscar-nav .oscar-cta .elementor-item{
  border:1.5px solid var(--navy);padding:9px 20px!important;border-radius:2px;
  color:var(--navy)!important;transition:all .2s}
.oscar-cta::after,.oscar-nav .oscar-cta .elementor-item::after{display:none!important}
.oscar-cta:hover,.oscar-nav .oscar-cta .elementor-item:hover{
  background:var(--navy);color:var(--cream-light)!important}

/* ---- Buttons: gold + navy with lift/arrow slide -------------------- */
.oscar-btn-gold,.oscar-btn-navy{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-weight:600;letter-spacing:.03em;border-radius:2px;
  transition:transform .22s,background-color .22s}
.oscar-btn-gold{background:var(--gold);color:var(--navy-deep);padding:15px 30px;font-size:14px}
.oscar-btn-gold:hover{background:var(--gold-soft);transform:translateY(-2px)}
.oscar-btn-navy{background:var(--navy);color:var(--cream-light);padding:15px 32px;font-size:13.5px}
.oscar-btn-navy:hover{background:var(--navy-deep);transform:translateY(-2px)}
.oscar-btn-gold .oscar-arrow{transition:transform .22s}
.oscar-btn-gold:hover .oscar-arrow{transform:translateX(4px)}

/* ---- Inline gold-underline link (gap widens on hover) -------------- */
.oscar-link-gold{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.03em;
  color:var(--navy);border-bottom:2px solid var(--gold);padding-bottom:3px;
  display:inline-flex;gap:8px;align-items:center;transition:gap .2s}
.oscar-link-gold:hover{gap:14px}

/* ---- Column cards: heading turns gold on card hover ---------------- */
.oscar-col-card{display:grid;grid-template-columns:132px 1fr;gap:24px;align-items:start}
.oscar-col-thumb{aspect-ratio:3/4;background:var(--navy);border-radius:3px;position:relative;
  overflow:hidden;display:flex;align-items:center;justify-content:center;padding:18px;text-align:center}
.oscar-col-thumb .t{font-family:var(--display);font-style:italic;font-size:16px;line-height:1.28;color:var(--cream)}
.oscar-col-thumb .byline{position:absolute;bottom:12px;left:0;right:0;font-family:var(--sans);
  font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft)}
.oscar-col-meta{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}
.oscar-col-meta .cat{color:var(--gold);font-weight:600}
.oscar-col-card h3{font-family:var(--display);font-weight:500;font-size:21px;line-height:1.2;
  color:var(--navy);margin-bottom:9px;transition:color .2s}
.oscar-col-card:hover h3{color:var(--gold)}
.oscar-col-card p{font-size:16px;color:var(--muted);line-height:1.5}

/* ---- Featured card ------------------------------------------------- */
.oscar-featured-card{display:grid;grid-template-columns:1fr 1.15fr;background:var(--paper);
  border-radius:4px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(21,34,56,.35)}

/* ---- Book spines: lift on hover ------------------------------------ */
.oscar-book{width:210px;text-align:center}
.oscar-book-cover{aspect-ratio:2/3;border-radius:2px;box-shadow:0 20px 40px -18px rgba(21,34,56,.5);
  margin-bottom:20px;display:flex;align-items:center;justify-content:center;padding:24px;
  position:relative;overflow:hidden;transition:transform .3s}
.oscar-book:hover .oscar-book-cover{transform:translateY(-8px)}
.oscar-book-cover .bt{font-family:var(--display);font-weight:500;font-size:17px;line-height:1.25;color:#fff;z-index:2}
.oscar-book-1{background:linear-gradient(160deg,#1e2f4a,#0e192b)}
.oscar-book-2{background:linear-gradient(160deg,#6e2230,#3d1119)}
.oscar-book-3{background:linear-gradient(160deg,#7a5a2a,#4a3416)}
.oscar-book h4{font-family:var(--serif);font-size:16px;font-weight:500;color:var(--ink);line-height:1.3}
.oscar-book .yr{font-family:var(--sans);font-size:11px;letter-spacing:.1em;color:var(--muted);
  text-transform:uppercase;margin-top:6px}

/* ---- Category tiles: gold border + lift on navy -------------------- */
.oscar-cat-tile{border:1px solid rgba(201,168,106,.24);border-radius:3px;padding:38px 28px;
  background:rgba(255,255,255,.015);transition:transform .25s,background-color .25s,border-color .25s;cursor:pointer}
.oscar-cat-tile:hover{background:rgba(176,141,73,.1);border-color:var(--gold);transform:translateY(-3px)}
.oscar-cat-tile .icn{width:38px;height:38px;color:var(--gold-soft);margin-bottom:20px;
  display:flex;align-items:center;justify-content:center}
.oscar-cat-tile .icn svg{width:100%;height:100%;stroke-width:1.4}
.oscar-cat-tile h4{font-family:var(--display);font-weight:500;font-size:20px;color:#fff;margin-bottom:8px}
.oscar-cat-tile p{font-family:var(--sans);font-size:13px;color:rgba(239,233,220,.6)}

/* ---- Footer social pills ------------------------------------------- */
.oscar-social a{width:36px;height:36px;border:1px solid rgba(239,233,220,.2);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--cream);transition:all .2s}
.oscar-social a:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}

/* ---- Blog content links: subtle gold underline animation ----------- */
.entry-content a,.oscar-prose a{background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1.5px;
  transition:background-size .25s ease;padding-bottom:1px}
.entry-content a:hover,.oscar-prose a:hover{background-size:100% 1.5px}

/* ---- Accessibility: visible focus ring ----------------------------- */
:where(a,button,input,textarea,select,.elementor-button,[tabindex]):focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---- Vertical rhythm for long-form post bodies --------------------- */
.entry-content>*+*{margin-top:1.15em}
.entry-content h2,.entry-content h3{margin-top:1.8em;line-height:1.2}
.entry-content p{max-width:70ch}

/* =====================================================================
   TASK 4 — Theme Builder template hooks (header / footer / single /
   archive). Widgets carry these classes via Elementor's CSS Classes
   field; all visual styling lives here in the child theme.
   ===================================================================== */

/* ---- Header (keyed off the theme's stable location wrapper) ---- */
.elementor-location-header,.oscar-header{position:sticky;top:0;z-index:99;
  background:rgba(250,248,243,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.elementor-location-header .elementor-container{min-height:82px}
.oscar-brand-name{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:.01em;color:var(--navy);line-height:1.05}
.oscar-brand-tag{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.oscar-nav .elementor-nav-menu>li{margin:0 17px}
.oscar-nav .elementor-nav-menu--main .elementor-item{padding:4px 0}

/* ---- Footer (keyed off the theme's stable location wrapper) ---- */
.elementor-location-footer,.oscar-footer{background:var(--navy);color:var(--cream)}
.elementor-location-footer .oscar-brand-name{color:#fff}
.elementor-location-footer .oscar-brand-tag{color:var(--gold-soft)}
/* rule between the footer's two rows */
.elementor-location-footer .elementor-top-section+.elementor-top-section{
  border-top:1px solid rgba(239,233,220,.14)}
.oscar-foot-heading{font-family:var(--sans);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-soft);margin-bottom:16px}
.oscar-foot-links .elementor-nav-menu a{color:rgba(239,233,220,.75)!important;
  font-family:var(--serif);font-size:16px;padding:6px 0!important;transition:color .2s}
.oscar-foot-links .elementor-nav-menu a:hover{color:#fff!important}
.oscar-foot-copy{font-family:var(--sans);font-size:12.5px;color:rgba(239,233,220,.5);letter-spacing:.02em}

/* ---- Single post ---- */
.oscar-single-head{background:var(--cream)}
.oscar-post-title{font-family:var(--display)!important;font-weight:500;
  font-size:clamp(30px,4.4vw,50px);line-height:1.06;letter-spacing:-.02em;color:var(--navy)}
.oscar-post-meta{font-family:var(--sans);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.oscar-post-meta a{color:var(--gold);font-weight:600}
.oscar-post-meta i,.oscar-post-meta svg{display:none} /* clean text-only meta */
.oscar-prose{font-family:var(--serif);font-size:19px;line-height:1.7;color:var(--ink)}
.oscar-prose>*+*{margin-top:1.15em}
.oscar-prose h2,.oscar-prose h3{margin-top:1.8em;line-height:1.2}
.oscar-prose p{max-width:70ch}

/* ---- Archive / blog ---- */
.oscar-archive-title{font-family:var(--display)!important;font-weight:500;
  font-size:clamp(30px,4.4vw,48px);color:var(--navy)}

/* ---- Heading colors must hit the inner .elementor-heading-title,
   which Elementor gives an explicit color that would otherwise win. -- */
.oscar-eyebrow .elementor-heading-title{color:var(--gold)}
.oscar-brand-name .elementor-heading-title{color:var(--navy)}
.oscar-brand-tag .elementor-heading-title{color:var(--muted)}
.oscar-post-title .elementor-heading-title{color:var(--navy)}
.oscar-archive-title .elementor-heading-title{color:var(--navy)}
.elementor-location-footer .oscar-brand-name .elementor-heading-title{color:#fff}
.elementor-location-footer .oscar-brand-tag .elementor-heading-title{color:var(--gold-soft)}
.oscar-foot-heading .elementor-heading-title{color:var(--gold-soft)}
.oscar-foot-copy .elementor-heading-title{color:rgba(239,233,220,.5)}

/* =====================================================================
   TASK 5 — Contact page + Contact Form 7 styling.
   ===================================================================== */
.oscar-contact-wrap{max-width:640px;margin:0 auto;padding:72px 24px 96px}
.oscar-contact-wrap .oscar-eyebrow{display:block;margin-bottom:14px}
.oscar-contact-title{font-family:var(--display);font-weight:500;
  font-size:clamp(30px,4vw,44px);letter-spacing:-.01em;color:var(--navy);margin-bottom:16px}
.oscar-contact-lead{font-size:18px;color:var(--muted);line-height:1.6;margin-bottom:40px;max-width:52ch}

.wpcf7-form label{display:block;font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:22px}
.wpcf7-form .wpcf7-form-control{display:block;width:100%;margin-top:9px;
  font-family:var(--serif);font-size:17px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:3px;padding:12px 14px;
  transition:border-color .2s,box-shadow .2s}
.wpcf7-form textarea.wpcf7-form-control{min-height:150px;resize:vertical}
.wpcf7-form .wpcf7-form-control:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(176,141,73,.15)}
.wpcf7-form .wpcf7-submit{width:auto;margin-top:6px;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.03em;
  background:var(--gold);color:var(--navy-deep);border:none;border-radius:2px;
  padding:15px 34px;transition:transform .22s,background-color .22s}
.wpcf7-form .wpcf7-submit:hover{background:var(--gold-soft);transform:translateY(-2px)}
.wpcf7-form .wpcf7-not-valid-tip{color:#a3402f;font-family:var(--sans);font-size:12px;
  text-transform:none;letter-spacing:0;margin-top:6px}
.wpcf7 .wpcf7-response-output{font-family:var(--sans);font-size:14px;
  border-radius:3px;margin:24px 0 0;padding:12px 16px}
.wpcf7-spinner{background:var(--gold)}

/* =====================================================================
   HOMEPAGE sections — built as an Elementor page using .oscar-* classes.
   Ports the approved prototype's section styles.
   ===================================================================== */
.oscar-section{padding:100px 0}
.oscar-section-head{text-align:center;margin-bottom:56px}
.oscar-section-head .oscar-eyebrow{display:block;margin-bottom:14px}
.oscar-section-title{font-family:var(--display);font-weight:500;
  font-size:clamp(28px,4vw,42px);letter-spacing:-.01em;color:var(--navy)}
.oscar-section-title::after{content:"";display:block;width:56px;height:2px;
  background:var(--gold);margin:20px auto 0}

/* Hero */
.oscar-hero{background:var(--navy);color:var(--cream);overflow:hidden}
.oscar-hero-inner{display:grid;grid-template-columns:1.05fr .95fr;min-height:560px;align-items:center}
.oscar-hero-text{padding:80px 60px 80px 0}
.oscar-hero .oscar-eyebrow{color:var(--gold-soft);display:block;margin-bottom:22px}
.oscar-hero-portrait::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--navy) 0%,rgba(21,34,56,.35) 22%,transparent 55%)}
.oscar-hero-title,.oscar-hero-title h1{font-family:var(--display);font-weight:500;
  font-size:clamp(40px,5.4vw,68px);line-height:1.02;letter-spacing:-.02em;color:#fff;margin:0 0 26px}
.oscar-hero-title em{font-style:italic;color:var(--gold-soft);font-weight:400}
.oscar-hero-lead{font-size:19px;line-height:1.62;color:rgba(239,233,220,.82);max-width:46ch;margin-bottom:38px}
.oscar-hero-portrait{position:relative;min-height:440px;align-self:stretch}
.oscar-hero-portrait,.oscar-hero-portrait .elementor-widget-container,.oscar-hero-portrait img{height:100%}
.oscar-hero-portrait img{width:100%;object-fit:cover;object-position:center 20%;filter:grayscale(.15) contrast(1.02)}

/* Latest columns grid */
.oscar-cols-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px 64px}
.oscar-col-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.oscar-center-btn{text-align:center;margin-top:64px}

/* Featured */
.oscar-featured{background:var(--cream)}
.oscar-featured-img{background:var(--navy);min-height:380px;overflow:hidden}
.oscar-featured-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2)}
.oscar-featured-body{padding:60px 56px}
.oscar-featured-body .oscar-eyebrow{display:block;margin-bottom:20px}
.oscar-featured-body h3{font-family:var(--display);font-weight:500;
  font-size:clamp(28px,3.4vw,38px);line-height:1.08;color:var(--navy);margin-bottom:22px;letter-spacing:-.01em}
.oscar-featured-body p{font-size:18px;color:var(--muted);margin-bottom:32px;max-width:48ch}

/* Publications */
.oscar-books{display:flex;justify-content:center;gap:56px;flex-wrap:wrap}

/* Categories */
.oscar-categories{background:var(--navy-deep);color:var(--cream)}
.oscar-categories .oscar-section-title{color:#fff}
.oscar-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.oscar-cat-tile{display:block;text-decoration:none}

/* Bio */
.oscar-bio{padding:110px 0;text-align:center}
.oscar-bio .oscar-eyebrow{display:block;margin-bottom:16px}
.oscar-bio-title{font-family:var(--display);font-weight:500;font-size:clamp(30px,4vw,44px);
  color:var(--navy);margin-bottom:30px;letter-spacing:-.01em}
.oscar-bio p{font-size:20px;line-height:1.7;color:var(--ink);max-width:68ch;margin:0 auto 38px}
.oscar-bio p em{font-style:italic;color:var(--gold)}

@media (max-width:900px){
  .oscar-hero-inner{grid-template-columns:1fr;min-height:0}
  .oscar-hero-text{padding:56px 0}
  .oscar-cols-grid{grid-template-columns:1fr;gap:36px}
  .oscar-featured-card{grid-template-columns:1fr}
  .oscar-cat-grid{grid-template-columns:1fr 1fr}
  .oscar-hero-portrait{min-height:320px}
  .oscar-hero-portrait::after{background:linear-gradient(0deg,var(--navy) 0%,transparent 60%)}
}
@media (max-width:560px){
  .oscar-cat-grid{grid-template-columns:1fr}
  .oscar-books{gap:36px}
}

/* ---- Respect reduced-motion --------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}