/*
Theme Name:   BEA Bolivar Child
Theme URI:    https://bolivarelectric.example/
Description:  Child theme for the Bolivar Energy Authority (BEA) website. Holds all BEA branding, the light/dark design system, and the hero slider. Because this is a CHILD theme, updating the parent theme will NOT overwrite anything in here — all customizations live in this folder and survive parent updates.
Author:       BEA Web Team
Author URI:   https://bolivarelectric.example/
Template:     twentytwentyfour
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  bea-child
*/

/* -----------------------------------------------------------------
   IMPORTANT — the "Template:" line above is the parent (main) theme.
   Set it to the EXACT folder name of your parent theme, e.g.:
     Template: astra          (if the parent is Astra)
     Template: generatepress  (if the parent is GeneratePress)
     Template: bolivar-parent (a custom parent named "bolivar-parent")
   WordPress reads it to link the child to the parent. When the parent
   updates, this folder is untouched, so your branding is safe.

   The actual design system lives in assets/css/bea-theme.css and is
   enqueued from functions.php. This file can stay nearly empty — add
   only small one-off overrides here if you ever need them.
   ----------------------------------------------------------------- */


/* ===== Service Request — redesigned flow ===== */
.svc-choose{padding:56px 0 20px;background:
  radial-gradient(1100px 380px at 50% -60px,var(--ico-bg),transparent 70%);
  border-top:1px solid var(--divider);}
.choose-head{text-align:center;max-width:640px;margin:0 auto 34px;}
.choose-head h2{font-size:clamp(24px,3.2vw,34px);font-weight:700;letter-spacing:-.6px;color:var(--text1);margin-bottom:10px;}
.choose-head p{font-size:15.5px;line-height:1.65;color:var(--text2);}
.chooser{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:760px;margin:0 auto;}
.choice{position:relative;display:flex;gap:16px;align-items:flex-start;text-align:left;
  background:var(--card);border:1.5px solid var(--card-border);border-radius:20px;padding:26px 24px;cursor:pointer;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--card-shadow);
  transition:transform .22s,box-shadow .22s,border-color .22s;color:inherit;font:inherit;width:100%;}
.choice:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:var(--card-lift);}
.choice[aria-pressed="true"]{border-color:var(--gold);box-shadow:var(--card-lift),0 0 0 3px rgba(242,221,0,.28);}
.choice .cico{width:52px;height:52px;flex-shrink:0;border-radius:14px;background:var(--ico-bg);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:26px;}
.choice h3{font-size:18px;font-weight:700;color:var(--text1);margin-bottom:5px;}
.choice p{font-size:13.5px;color:var(--text2);line-height:1.5;}
.choice .pick{margin-top:10px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--link);}
.choice[aria-pressed="true"] .pick{color:var(--eyebrow);}

/* Centered application container */
.app-wrap{max-width:860px;margin:0 auto;padding:8px 0 4px;}
.app-panel{display:none;}
.app-panel.active{display:block;animation:appin .4s ease;}
@keyframes appin{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.app-shell{background:var(--card);border:1px solid var(--card-border);border-radius:24px;padding:34px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--card-shadow);}
.app-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--divider);}
.app-head .eyebrow{margin-bottom:8px;}
.app-head h2{font-size:clamp(22px,2.6vw,28px);font-weight:700;letter-spacing:-.5px;color:var(--text1);}
.app-head .lead{font-size:14px;color:var(--text2);line-height:1.6;margin-top:6px;max-width:520px;}
.change-btn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--link);
  background:var(--surface);border:1px solid var(--divider);border-radius:10px;padding:9px 15px;cursor:pointer;transition:color .2s,border-color .2s;white-space:nowrap;}
.change-btn:hover{color:var(--link-hover);border-color:var(--gold);}

/* Nested cards inside the application */
.innercard{background:var(--surface);border:1px solid var(--divider);border-radius:16px;padding:22px 22px;margin-bottom:22px;}
.innercard>h4,.innercard>h3{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--text3);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.innercard>h4 i,.innercard>h3 i{color:var(--accent);font-size:15px;}
.fee-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.fee-2col .feecard{margin:0;}

/* Large, modern inputs scoped to the app */
.app-shell .field label{font-size:13.5px;}
.app-shell .field input,.app-shell .field select{font-size:16px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--divider);transition:border-color .18s,box-shadow .18s,background .18s;}
.app-shell .field input::placeholder{color:var(--text3);}
.app-shell .field input:focus,.app-shell .field select:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(242,221,0,.22);background:var(--bg2);}
.app-shell .radiopill{padding:13px 18px;font-size:14.5px;border-width:1.5px;border-radius:12px;transition:border-color .18s,background .18s;}
.app-shell .radiopill:hover{border-color:var(--gold);}
.app-shell legend{font-size:14px;}
.app-shell .fgrid{gap:18px;}

/* Action buttons row */
.app-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;padding-top:22px;border-top:1px solid var(--divider);}
.app-actions .btn{justify-content:center;}
.app-actions .btn.grow{flex:1 1 240px;}
.btn-outline{background:var(--surface);color:var(--text1);border:1.5px solid var(--divider);}
.btn-outline:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:var(--card-shadow);}
.app-secondary{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.app-secondary .btn{flex:1 1 200px;}
.app-note{font-size:12.5px;color:var(--text3);margin-top:16px;line-height:1.55;text-align:center;}
.form-ok{display:none;align-items:center;gap:10px;margin-top:18px;padding:14px 16px;border-radius:12px;
  background:rgba(46,160,90,.12);border:1px solid rgba(46,160,90,.4);color:var(--text1);font-size:14px;font-weight:600;}
.form-ok.show{display:flex;}
.form-ok i{color:#2EA05A;font-size:18px;}
.form-err{align-items:center;gap:10px;margin-top:18px;padding:14px 16px;border-radius:12px;
  background:rgba(200,60,60,.12);border:1px solid rgba(200,60,60,.42);color:var(--text1);font-size:14px;font-weight:600;}
.form-err[hidden]{display:none;}
.form-err:not([hidden]){display:flex;}
.form-err i{color:#C83C3C;font-size:18px;}
.form-err a{color:inherit;}

/* Helper strip below the application */
.svc-help{padding:44px 0 8px;}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:860px;margin:0 auto;}
.help-card{background:var(--surface);border:1px solid var(--divider);border-radius:18px;padding:24px;}
.help-card .ai{width:44px;height:44px;border-radius:12px;background:var(--ico-bg);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:12px;}
.help-card h3{font-size:16px;font-weight:700;color:var(--text1);margin-bottom:6px;}
.help-card p{font-size:13.5px;color:var(--text2);line-height:1.6;}
.help-card a{color:var(--link);font-weight:600;text-decoration:none;}
.help-card a:hover{color:var(--link-hover);}

@media(max-width:760px){
  .chooser{grid-template-columns:1fr;}
  .app-shell{padding:24px 20px;}
  .fee-2col{grid-template-columns:1fr;}
  .help-grid{grid-template-columns:1fr;}
  .app-actions .btn.grow,.app-secondary .btn{flex:1 1 100%;}
}
/* ===== end redesigned flow ===== */


/* ===== Service Request — form polish (glass + shadow + hover) ===== */
/* Layout: force fields to stack full-width (beats parent-theme form CSS) */
.app-shell .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.app-shell .field.full{grid-column:1 / -1;}
.app-shell .field{display:flex !important;flex-direction:column !important;align-items:stretch;gap:9px;min-width:0;}
.app-shell .field label{font-size:13.5px;font-weight:600;color:var(--text1);text-align:left;margin:0;}

/* Glassmorphism inputs */
.app-shell .field input,
.app-shell .field select,
.app-shell .field textarea{
  width:100% !important;box-sizing:border-box !important;display:block !important;float:none !important;margin:0 !important;
  font:inherit;font-size:16px;line-height:1.3;padding:15px 16px;
  border-radius:14px;border:1px solid var(--card-border);
  background:linear-gradient(145deg,rgba(255,255,255,.60),rgba(255,255,255,.28));
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  color:var(--text1);
  box-shadow:0 2px 10px rgba(34,48,85,.07), inset 0 1px 0 rgba(255,255,255,.45);
  transition:border-color .2s ease, box-shadow .25s ease, transform .2s ease, background .25s ease;
}
[data-theme="dark"] .app-shell .field input,
[data-theme="dark"] .app-shell .field select,
[data-theme="dark"] .app-shell .field textarea{
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  box-shadow:0 2px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.app-shell .field input::placeholder,
.app-shell .field textarea::placeholder{color:var(--text3);opacity:.85;}

/* Hover — subtle lift + gold edge */
.app-shell .field input:hover,
.app-shell .field select:hover,
.app-shell .field textarea:hover{
  border-color:var(--gold);
  box-shadow:0 8px 22px rgba(34,48,85,.12), inset 0 1px 0 rgba(255,255,255,.5);
  transform:translateY(-1px);
}
[data-theme="dark"] .app-shell .field input:hover,
[data-theme="dark"] .app-shell .field select:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Focus — glowing gold ring */
.app-shell .field input:focus,
.app-shell .field select:focus,
.app-shell .field textarea:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(242,221,0,.30), 0 10px 26px rgba(34,48,85,.14);
  background:var(--bg2);transform:translateY(-1px);
}

/* Native controls that ignore background: keep them legible + on-brand */
.app-shell .field select{-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(145deg,rgba(255,255,255,.60),rgba(255,255,255,.28)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A6E8C' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;background-position:center, right 16px center;padding-right:44px;}
[data-theme="dark"] .app-shell .field select{
  background-image:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237F9CBC' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;background-position:center, right 16px center;padding-right:44px;}
.app-shell .field input[type="date"]{min-height:52px;}
.app-shell .field input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7;}

@media(max-width:760px){.app-shell .fgrid{grid-template-columns:1fr;}}
/* ===== end form polish ===== */

/* ===== BEA fancy layer — scroll reveal + hover polish ===== */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;}
.reveal.is-in{opacity:1;transform:none;}

/* Cards get a touch more travel + a whisper of scale for depth */
.infocard.reveal,.gcard.reveal,.doclink.reveal,.stat.reveal,.choice.reveal,.monthcard.reveal{
  transform:translateY(26px) scale(.985);}
.infocard.reveal.is-in,.gcard.reveal.is-in,.doclink.reveal.is-in,.stat.reveal.is-in,
.choice.reveal.is-in,.monthcard.reveal.is-in{transform:none;}

/* Interactive lift on the card-like elements that didn't already have one */
.infocard,.doclink,.monthcard,.feecard{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;}
.infocard:hover,.doclink:hover,.monthcard:hover{
  transform:translateY(-4px);box-shadow:var(--card-lift);border-color:var(--gold);}

/* Honor reduced-motion: no transforms, no fade — content is just present */
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.is-in{opacity:1 !important;transform:none !important;transition:none !important;}
  .infocard:hover,.doclink:hover,.monthcard:hover{transform:none;}
}
/* ===== end fancy layer ===== */