/*
Theme Name: Okie Engraving Bold
Theme URI: https://okie-engraving.com/
Author: MakerTrackPro
Author URI: https://okie-engraving.com/
Description: A bold, conversion-focused theme for Okie Engraving (WooCommerce-ready). Includes a redesigned homepage with strong CTAs, galleries, reviews, and fundraising highlights.
Version: 0.1.30
Requires at least: 6.1
Tested up to: 6.5
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: okie-engraving-bold
Tags: custom-logo, custom-menu, featured-images, one-column, two-columns, e-commerce, block-styles
*/

:root{
  --okie-bg: #0B1020;
  --okie-ink: #F5F7FF;
  --okie-heading: #F5F7FF;
  --okie-card-heading: #FFFFFF;
  --okie-card-text: #F5F7FF;
  --okie-card-muted: #B7BFD3;
  --okie-muted: #B7BFD3;
  --okie-primary: #FC4C13; /* brand orange */
  --okie-secondary: #00425B; /* deep blue */
  --okie-accent: #FCC03B; /* warm gold */
  --okie-btn-primary-bg: var(--okie-primary);
  --okie-btn-primary-text: #FFFFFF;
  --okie-btn-secondary-bg: var(--okie-secondary);
  --okie-btn-secondary-text: #FFFFFF;
  --okie-btn-ghost-bg: rgba(255,255,255,0.06);
  --okie-btn-ghost-border: rgba(255,255,255,0.16);
  --okie-font-body: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  --okie-font-headings: var(--okie-font-body);
  --okie-font-base-size: 16px;
  --okie-card: #0F1A33;
  --okie-border: rgba(255,255,255,0.14);
  --okie-shadow: 0 18px 46px rgba(0,0,0,0.45);
  --okie-radius: 20px;
  --okie-radius-lg: 30px;
  --okie-max: 1180px;


  /* Vertical spacing controls (overridden via Customizer) */
  --okie-space-scale: 1;
  --okie-section-pad-y-base: clamp(24px, 3.2vw, 44px);
  --okie-section-pad-tight-y-base: clamp(18px, 2.6vw, 34px);
  --okie-card-pad-y-base: 14px;
  --okie-card-pad-lg-y-base: 18px;
  --okie-grid-row-gap-base: 10px;
  --okie-popbtn-pad-y-base: 10px;

  --okie-section-pad: calc(var(--okie-section-pad-y-base) * var(--okie-space-scale));
  --okie-section-pad-tight: calc(var(--okie-section-pad-tight-y-base) * var(--okie-space-scale));

  --okie-hero-photo-opacity: 0.22;
  --okie-focus: rgba(252,192,59,0.72);
}

/* Base */
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: var(--okie-font-body);
  background: var(--okie-bg);
  color: var(--okie-ink);
  font-size: var(--okie-font-base-size);
  line-height: 1.6;
}
a{color: inherit}
img{max-width:100%; height:auto}
.okie-container{max-width:var(--okie-max); margin:0 auto; padding:0 18px}
.okie-sr{position:absolute;left:-9999px}

/* Header */
.okie-header{
  position: sticky; top:0; z-index: 1000;
  background: rgba(11,16,32,0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--okie-border);
}
.okie-header__inner{
  display:flex;
  flex-direction:column;
  gap: 6px;
  padding: 8px 0;
}

/* Top row layout: phone (left), logo (center), contact/menu (right) */
.okie-header__top{
  /* Force a true 3-zone layout so the CTA is always right-aligned */
  display:grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  grid-template-areas: "left brand right";
  align-items:center;
  gap: 12px;
}
.okie-header__left{grid-area:left; justify-self:start}
.okie-brand{grid-area:brand;}
.okie-header__right{grid-area:right; justify-self:end; display:flex; align-items:center; justify-content:flex-end; gap: 10px}

.okie-brand{display:flex; align-items:center; justify-content:center; gap: 12px; text-decoration:none; justify-self:center; min-width:0; max-width:320px;}
.okie-brand img.custom-logo{
  max-height:56px !important;
  max-width:280px !important;
  width:auto !important;
  height:auto !important;
  display:block;
}
/* Some WP setups wrap the logo differently; ensure it is constrained */
.okie-brand .custom-logo-link img{
  max-height:56px !important;
  max-width:280px !important;
  width:auto !important;
  height:auto !important;
  display:block;
}
@media (max-width: 520px){
  .okie-brand img.custom-logo{max-height:40px !important; max-width:220px !important;}
  .okie-brand .custom-logo-link img{max-height:40px !important; max-width:220px !important;}
}
.okie-logo{
  width: 46px; height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--okie-primary), var(--okie-accent));
  box-shadow: 0 16px 34px rgba(252,76,19,0.28);
}
.okie-brand__text{display:flex; flex-direction:column; line-height:1.1}
.okie-brand__name{font-weight: 800; letter-spacing:-0.02em}
.okie-brand__tag{font-size: 13px; color: var(--okie-muted)}

/* Hard override: keep header CTA locked to the right on desktop/iPad (beats Customizer Additional CSS) */
.okie-header .okie-header__inner .okie-header__top{
  display:grid !important;
  grid-template-columns: minmax(140px,1fr) auto minmax(140px,1fr) !important;
  grid-template-areas: "left brand right";
  align-items:center !important;
}
.okie-header .okie-header__top .okie-header__left{justify-self:start !important;}
.okie-header .okie-header__top .okie-brand{justify-self:center !important;}
.okie-header .okie-header__top .okie-header__right{justify-self:end !important; display:flex !important; align-items:center !important; gap:10px !important;}

/* Sexy nav bar (desktop/iPad) */
.okie-nav{display:flex; justify-content:center}
.okie-nav__list{
  list-style:none; margin:0; padding: 6px;
  display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap: 10px;
  width: fit-content;
  max-width: min(860px, 100%);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 44px rgba(0,0,0,0.34);
}
.okie-nav__list > li{margin:0}
.okie-nav a{
  position:relative;
  display:inline-flex;
  text-decoration:none;
  font-weight: 900;
  letter-spacing: -0.01em;
  padding: 9px 12px;
  border-radius: 999px;
  color: var(--okie-ink);
  transition: background .18s ease, transform .14s ease;
}
.okie-nav a:hover{background: rgba(255,255,255,0.10); transform: translateY(-1px)}
.okie-nav .current-menu-item > a,
.okie-nav .current_page_item > a{
  background: rgba(252,76,19,0.16);
  border: 1px solid rgba(252,76,19,0.30);
}
.okie-nav a::after{
  content:"";
  position:absolute;
  left: 14px; right: 14px; bottom: 7px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--okie-accent), var(--okie-primary));
  opacity: 0;
  transition: opacity .18s ease;
}
.okie-nav a:hover::after{opacity: .9}

.okie-cta{
  display:flex; align-items:center; gap: 10px; flex-wrap:wrap; justify-content:flex-end;
}
.okie-btn{
  display:inline-flex; align-items:center; justify-content:center; gap: 10px;
  text-decoration:none; border-radius: 999px;
  padding: 14px 20px; font-weight: 900;
  border: 1px solid transparent;
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.okie-btn:hover{transform: translateY(-1px)}
.okie-btn:active{transform: translateY(1px)}
.okie-btn--primary{
  background: var(--okie-btn-primary-bg); color: var(--okie-btn-primary-text);
  box-shadow: 0 20px 36px rgba(252,76,19,0.28);
}
.okie-btn--primary:hover{background:#e64310}
.okie-btn--ghost{
  background: var(--okie-btn-ghost-bg);
  border-color: var(--okie-btn-ghost-border);
}
.okie-btn--ghost:hover{background: rgba(255,255,255,0.12)}
.okie-btn--secondary{
  background: var(--okie-btn-secondary-bg); color: var(--okie-btn-secondary-text);
  box-shadow: 0 20px 36px rgba(0,66,91,0.28);
}
.okie-btn--secondary:hover{background:#003245}

/* Default: hide burger button unless on mobile */
.okie-burger__btn{display:none}

/* Mobile menu */
@media (max-width: 720px){
  .okie-nav{display:none}
  .okie-btn--phone{display:none}
  .okie-burger__btn{display:inline-flex}
}
@media (min-width: 721px){
  .okie-burger__btn{display:none}
}
.okie-mobile{
  display:none;
  border-top: 1px solid var(--okie-border);
  padding: 10px 0 14px;
}
.okie-mobile a{
  display:block; padding: 10px 12px; text-decoration:none;
  border-radius: 14px; font-weight: 750;
}
.okie-mobile a:hover{background: rgba(255,255,255,0.08)}
.okie-mobile.is-open{display:block}

/* Sections */
.okie-section{padding: var(--okie-section-pad) 0}
.okie-section--tight{padding: var(--okie-section-pad-tight) 0}
.okie-kicker{color: var(--okie-accent); font-weight:900; text-transform:uppercase; letter-spacing:0.12em; font-size:12px}
.okie-h1{color: var(--okie-heading);
font-family: var(--okie-font-headings);
font-size: clamp(38px, 4.4vw, 64px); letter-spacing:-0.035em; line-height:1.02; margin: 10px 0 12px}
.okie-h2{color: var(--okie-heading);
font-family: var(--okie-font-headings);
font-size: clamp(28px, 3.3vw, 40px); letter-spacing:-0.025em; margin: 0 0 12px}
.okie-lead{font-size: 18px; color: var(--okie-muted); max-width: 64ch}
.okie-grid{display:grid; gap: calc(var(--okie-grid-row-gap-base) * var(--okie-space-scale)) 10px}
.okie-grid--2{grid-template-columns: 1.2fr 0.8fr}
.okie-grid--3{grid-template-columns: repeat(3, 1fr)}
.okie-grid--4{grid-template-columns: repeat(4, 1fr)}
@media (max-width: 960px){
  .okie-grid--2{grid-template-columns: 1fr}
  .okie-grid--4{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 560px){
  .okie-grid--3{grid-template-columns: 1fr}
  .okie-grid--4{grid-template-columns: 1fr}
}
.okie-card{
  background: var(--okie-card);
  border: 1px solid var(--okie-border);
  border-radius: var(--okie-radius);
  box-shadow: var(--okie-shadow);
}
.okie-card__pad{padding: calc(var(--okie-card-pad-y-base) * var(--okie-space-scale)) 14px}

/* Card typography colors (Customizer) */
.okie-card h1, .okie-card h2, .okie-card h3, .okie-card h4, .okie-card .okie-h2{
  color: var(--okie-card-heading);
}
.okie-card, .okie-card p, .okie-card li, .okie-card span, .okie-card div{
  color: var(--okie-card-text);
}
.okie-card .okie-mini, .okie-card .okie-lead, .okie-card .okie-kicker{
  color: var(--okie-card-muted);
}

.okie-card__pad-lg{padding: calc(var(--okie-card-pad-lg-y-base) * var(--okie-space-scale)) 18px}
.okie-badge{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(252,76,19,0.14);
  border: 1px solid rgba(252,76,19,0.28);
  font-weight: 950;
}
.okie-hero{
  border-radius: var(--okie-radius-lg);
  padding: 32px;
  background:
    radial-gradient(900px 300px at 20% 20%, rgba(252,76,19,0.22), transparent 60%),
    radial-gradient(900px 300px at 80% 30%, rgba(252,192,59,0.18), transparent 60%),
    radial-gradient(900px 300px at 70% 90%, rgba(0,66,91,0.18), transparent 60%),
    linear-gradient(180deg, rgba(15,26,51,0.92), rgba(11,16,32,0.78));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 34px 84px rgba(11,18,32,0.14);
}

/* Hero background photo (Customizer) */
.okie-hero--hasbg{position:relative; overflow:hidden}
.okie-hero--hasbg::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--okie-hero-bg);
  background-size:cover;
  background-position:center;
  opacity: var(--okie-hero-photo-opacity);
  filter:saturate(1.05) contrast(1.05);
  transform: scale(1.02);
}
.okie-hero--hasbg::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 300px at 20% 20%, rgba(252,76,19,0.32), transparent 60%),
    radial-gradient(900px 300px at 80% 30%, rgba(252,192,59,0.24), transparent 60%),
    radial-gradient(900px 300px at 70% 90%, rgba(0,66,91,0.24), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.66));
}
.okie-hero--hasbg > *{position:relative; z-index:1}
.okie-list{margin: 0; padding-left: 18px; color: var(--okie-muted)}
.okie-mini{font-size: 13px; color: var(--okie-muted)}
.okie-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 12px; border-radius: 14px;
  background: rgba(0,66,91,0.06);
  border: 1px solid rgba(0,66,91,0.12);
  font-weight: 800;
}

.okie-steps{counter-reset: step}
.okie-step{
  display:flex; gap: 12px; align-items:flex-start
}
.okie-step::before{
  counter-increment: step;
  content: counter(step);
  width: 34px; height: 34px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 12px;
  background: rgba(0,66,91,0.10);
  border: 1px solid rgba(0,66,91,0.14);
  font-weight: 900;
}
.okie-quote{font-weight: 800; letter-spacing:-0.01em}
.okie-stars{letter-spacing: 0.08em; color: var(--okie-accent); font-weight: 900}
.okie-footer{
  padding: calc(34px * var(--okie-space-scale)) 0;
  background: var(--okie-footer-bg, #07101a);
  color: var(--okie-footer-text, rgba(255,255,255,0.86));
  margin-top: calc(24px * var(--okie-space-scale));
}
.okie-footer h1,.okie-footer h2,.okie-footer h3,.okie-footer h4,.okie-footer .okie-widget__title{
  color: var(--okie-footer-heading, #ffffff);
}
.okie-footer a{color: var(--okie-footer-link, #ffffff)}
.okie-footer a:hover{color: var(--okie-footer-link-hover, #FC4C13)}
.okie-footer .okie-mini{color: rgba(255,255,255,0.68)}
.okie-divider{height:1px; background: var(--okie-footer-divider, rgba(255,255,255,0.14)); margin: 12px 0}

.okie-footer__bottom{
  background: var(--okie-cp-bg, #050a10);
  color: var(--okie-cp-color, rgba(255,255,255,0.70));
  border-top: 1px solid var(--okie-footer-divider, rgba(255,255,255,0.14));
  padding: 10px 0;
  margin-top: 8px;
  font-size: 14px;
}
.okie-footer__bottom a{color: var(--okie-cp-link, #ffffff)}
.okie-footer__bottom a:hover{color: var(--okie-cp-link-hover, #FC4C13)}

/* WP content */
.entry-content{max-width: var(--okie-max); margin: 0 auto; padding: 20px 18px}
.entry-content h1,.entry-content h2,.entry-content h3{letter-spacing:-0.02em}
.wp-block-image img{border-radius: 18px}


/* Popular items (button-style tiles with left 1:1 image) */
.okie-popbtn{display:block; text-decoration:none; color:inherit; transition: transform .15s ease, box-shadow .15s ease}

.okie-popbtn__pad{padding: calc(var(--okie-popbtn-pad-y-base) * var(--okie-space-scale)) 10px; display:flex; align-items:flex-start; gap:12px}
.okie-popbtn__imgwrap{
  width: 56px; height: 56px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--okie-border);
  background: linear-gradient(180deg, rgba(252,76,19,0.12), rgba(0,66,91,0.10));
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  display:flex; align-items:center; justify-content:center;
  flex: 0 0 auto;
}
.okie-popbtn__img{width:100%; height:100%; object-fit:cover; display:block}
.okie-popbtn__placeholder{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-weight:950; letter-spacing:-0.02em; color:var(--okie-ink)}
.okie-popbtn__content{flex: 1 1 auto}
.okie-popbtn__title{font-weight:950; letter-spacing:-0.01em; line-height:1.1; color: var(--okie-card-heading)}
.okie-popbtn__content .okie-mini{color: var(--okie-card-muted)}
.okie-popbtn__arrow{opacity:.75; font-weight:900}
.okie-popbtn:hover{transform: translateY(-2px); box-shadow: 0 18px 46px rgba(11,18,32,0.18)}
.okie-popbtn:hover .okie-popbtn__imgwrap{border-color: rgba(252,76,19,0.35)}
.okie-popbtn:focus{outline: 3px solid var(--okie-focus); outline-offset: 2px}

/* Card media (small photos inside cards) */
.okie-card__media{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--okie-border);
  background: rgba(0,0,0,0.03);
}
.okie-card__media img{display:block; width:100%; height:auto}
.okie-card__media--sm img{max-height: 160px; object-fit: cover}

/* How-it-works media grid */
.okie-media-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: calc(10px * var(--okie-space-scale)) 10px;
}
@media (min-width: 880px){
  .okie-media-grid{grid-template-columns: 1fr 1fr}
}
.okie-media-tile{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--okie-border);
  background: rgba(0,0,0,0.03);
}
.okie-media-tile img{display:block; width:100%; height: 190px; object-fit: cover}

/* Gallery strip */
.okie-gallery{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(10px * var(--okie-space-scale)) 10px;
}
@media (min-width: 640px){
  .okie-gallery{grid-template-columns: repeat(3, 1fr)}
}
@media (min-width: 980px){
  .okie-gallery{grid-template-columns: repeat(5, 1fr)}
}
.okie-gallery__item{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--okie-border);
  background: rgba(0,0,0,0.03);
}
.okie-gallery__item img{display:block; width:100%; height: 180px; object-fit: cover}
.okie-btn:focus-visible{outline: 3px solid var(--okie-focus); outline-offset: 2px}

.okie-card--hover{transition: transform .16s ease, box-shadow .18s ease}
.okie-card--hover:hover{transform: translateY(-2px); box-shadow: 0 18px 46px rgba(11,18,32,0.14)}


/* Hero mini gallery */
.okie-hero-gallery{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(10px * var(--okie-space-scale)) 10px;
}
.okie-hero-gallery__tile{
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  aspect-ratio: 1 / 1;
}
.okie-hero-gallery__tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: saturate(1.08) contrast(1.05);
}


/* Footer widgets */
.okie-footer{margin-top: 34px; padding: 42px 0 0; background: var(--okie-footer-bg, #07101a); border-top: 1px solid var(--okie-footer-divider, rgba(255,255,255,0.14));}
.okie-footer__widgets{padding-bottom: 26px;}
.okie-footer__grid{display:grid; gap: 18px; grid-template-columns: repeat(3, 1fr);}
@media (max-width: 860px){.okie-footer__grid{grid-template-columns: 1fr;}}
.okie-widget{background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--okie-radius); padding: 18px; box-shadow:none;}
.okie-widget__title{margin:0 0 10px; font-family: var(--okie-font-headings); letter-spacing:-0.02em; font-size: 18px; color: var(--okie-heading);}
.okie-footer__bottom{border-top:1px solid var(--okie-footer-divider, rgba(255,255,255,0.14)); padding: 14px 0 18px; margin-top: 8px; color: var(--okie-cp-color, rgba(255,255,255,0.70)); font-size: 14px;}



/* === Mobile header polish (iPhone) === */
.okie-burger__btn{
  display:inline-flex;
  border: 1px solid var(--okie-border);
  background: rgba(255,255,255,0.06);
  color: var(--okie-heading);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

@media (min-width: 881px){
  .okie-burger__btn{display:none;}
}
.okie-burger__icon{font-size: 16px}
.okie-burger__text{font-size: 13px; margin-left: 6px}

.okie-mobile__cta{padding: 10px 0 0; display:grid; gap: 10px}

@media (max-width: 880px){
  .okie-nav{display:none}
  .okie-burger__btn{display:inline-flex; align-items:center; justify-content:center}
  /* On mobile, keep CTA visible but make it compact and aligned */
  .okie-cta{gap: 10px; flex-wrap:nowrap}
  .okie-btn--cta{padding: 10px 12px}
  .okie-btn--phone{display:none} /* phone already in menu items typically */
}

/* Extra-small iPhones: prevent awkward wrapping/misalignment */
@media (max-width: 420px){
  .okie-header__inner{padding: 10px 0}
  .okie-logo{width:40px; height:40px; border-radius: 12px}
  .okie-brand__tag{display:none}
  .okie-btn--cta{padding: 10px 10px; font-size: 14px}
  .okie-burger__btn{padding: 10px 10px}
  .okie-burger__text{display:none}
}


/* === Mobile header polish (iPhone) === */
.okie-btn--cta{white-space:nowrap}
.okie-cta__short{display:none}

/* Make burger match button shape */
.okie-burger__btn{border-radius:999px}

/* Mobile-specific sizing: keep Contact Us from wrapping into a circle */
@media (max-width: 520px){
  .okie-btn--cta{padding:10px 12px; font-size:14px}
  .okie-cta__full{display:none}
  .okie-cta__short{display:inline}
  .okie-burger__btn{padding:10px 12px}
  .okie-burger__text{display:none}
}

/* Tighten hero on mobile so content sits higher */
@media (max-width: 520px){
  .okie-hero{padding-top: 18px; padding-bottom: 18px}
  .okie-hero__card{padding: 16px}
  .okie-hero__cta{gap:10px}
  .okie-hero__tertiary{display:none}
}

/* Desktop/iPad: hide burger when primary nav is visible */
@media (min-width: 721px){
  .okie-burger__btn{display:none !important;}
}