/* ===========================================================================
   The Yoga Channel — Brand theme
   ===========================================================================
   Palette, typography, buttons and panels. Loads after the framework
   (vendor/foundation-theme.css) and before site.css. Change a brand value
   once here and it changes everywhere.
   ======================================================================== */

:root {
    /* --- Palette -------------------------------------------------------- */
    --yc-plum:        rgba(88, 68, 89, 1);     /* primary       #584459 */
    --yc-plum-dark:   rgba(79, 61, 80, 1);     /* hover         #4f3d50 */
    --yc-plum-soft:   rgba(88, 68, 89, 0.20);  /* content panel veil    */
    --yc-lavender:    rgba(246, 241, 247, 1);  /* page bg / bar #f6f1f7 */
    --yc-ink:         rgba(34, 34, 34, 1);     /* body text     #222222 */
    --yc-link:        rgba(104, 88, 107, 1);   /* footer links  #68586b */
    --yc-panel-white: rgba(255, 253, 255, 1);  /* default panel #fffdff */
    --yc-white:       rgba(255, 255, 255, 1);

    /* --- Type stacks ------------------------------------------------------
       display = Nanum Myeongjo (serif headings)
       script  = Breathing (hand-drawn accent, self-hosted below)          */
    --yc-font-display: "Nanum Myeongjo", serif;
    --yc-font-script:  "Breathing", sans-serif;
}

/* Self-hosted accent font */
@font-face {
    font-family: "Breathing";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Breathing.woff") format("woff"),
         url("../fonts/Breathing.ttf") format("truetype");
    font-display: swap;
}

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */
::-moz-selection { color: var(--yc-white); background: var(--yc-plum); }
::selection      { color: var(--yc-white); background: var(--yc-plum); }

body { background-color: #F6F1F7; color: var(--yc-ink); }

body, .font-family-text { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; }
h1, .font-family-h1 { font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 300; }
h2, h3, h4, h5, h6, .font-family-h2 { font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 600; }
h1, h2, h3, h4, h5, h6 { color: var(--yc-ink); margin-top: 0; }

h1 { font-size: 2.12rem; }
h2 { font-size: 1.69rem; }
h3 { font-size: 1.38rem; }
h4, h5 { font-size: 1.12rem; }
h6 { font-size: 1rem; }
p, ul li, ol li { font-size: 1rem; }
@media only screen and (min-width: 40.063em) {
    h1 { font-size: 2.75rem; }
    h2 { font-size: 2.31rem; }
    h3 { font-size: 1.69rem; }
    h4 { font-size: 1.44rem; }
}

a { color: rgba(0, 140, 186, 1); text-decoration: none; font-weight: inherit; }
a:hover, a:focus { color: rgba(0, 102, 136, 1); }
.alt { color: var(--yc-white); }
h1.alt, h2.alt, h3.alt, h4.alt, h5.alt, h6.alt { color: var(--yc-white); }
/* Inside panels the framework sets p color at higher specificity than a
   bare .alt — re-assert white copy (home photo cards, etc.). */
.panel p.alt,
.photo-card .panel.custom p.alt { color: var(--yc-white); }

/* Brand text + font helpers (replace the generated fn-text-sw1c1 /
   font-vault-1 / font-vault-2 classes). */
.brand-text,
.brand-text p, .brand-text div { color: var(--yc-plum); }
h1.brand-text, h2.brand-text, h3.brand-text { color: var(--yc-plum); }
.panel h1.brand-text, .panel h2.brand-text, .panel h3.brand-text { color: var(--yc-plum); }
.font-display, .font-display > a, .font-display > li { font-family: var(--yc-font-display) !important; font-weight: 400; font-style: normal; }
.font-script,  .font-script > a,  .font-script > li  { font-family: var(--yc-font-script) !important; }

/* ---------------------------------------------------------------------------
   Grid tweaks
--------------------------------------------------------------------------- */
.row { max-width: 1000px !important; }
.row.max-edge { max-width: 100% !important; }
.column, .columns { padding-left: 0.94rem; padding-right: 0.94rem; }
.row .row { margin: 0 -0.94rem; }

/* ---------------------------------------------------------------------------
   Buttons — solid plum default; "secondary" = lavender; ghost variants
--------------------------------------------------------------------------- */
.button { background-color: var(--yc-plum); color: var(--yc-white); }
.button:hover { color: var(--yc-white); background-color: var(--yc-plum-dark); }
.button.secondary { background-color: var(--yc-lavender); color: rgba(51, 51, 51, 1); }
.button.secondary:hover { color: rgba(51, 51, 51, 1); background-color: rgba(234, 229, 235, 1); }
.button.ghost { background-color: transparent; border-width: 1px; border-color: var(--yc-plum); color: var(--yc-plum); }
.button.ghost:hover { color: var(--yc-white); border-color: var(--yc-plum-dark); background-color: var(--yc-plum-dark); }
.button.ghost.secondary { border-color: var(--yc-lavender); color: var(--yc-lavender); background-color: transparent; }
.button.ghost.secondary:hover { color: rgba(51, 51, 51, 1); border-color: rgba(234, 229, 235, 1); background-color: rgba(234, 229, 235, 1); }
.button.green { background-color: rgba(17, 128, 2, 1); color: var(--yc-white); }   /* "Try a Free Class" CTA */
.button.green:hover { background-color: rgba(83, 174, 104, 1); }
.btn-row { text-align: center; margin: 16px 0; }

/* ---------------------------------------------------------------------------
   Panels
--------------------------------------------------------------------------- */
.panel { background-color: var(--yc-panel-white); border-color: rgba(233, 228, 234, 1); }
.panel.custom { padding: 1.25rem; border-width: 0; margin-bottom: 0; background-color: transparent; border-color: transparent; }
.panel-plum  { background-color: var(--yc-plum-soft);      border-color: var(--yc-plum-soft); }      /* program pages   */
.panel-dark  { background-color: rgba(0, 0, 0, 0.60);      border-color: rgba(0, 0, 0, 0.60); }      /* home photo cards */
.panel-frost { background-color: rgba(255, 255, 255, 0.60); border-color: rgba(255, 255, 255, 0.60); } /* orientation form */

/* ---------------------------------------------------------------------------
   Top-bar "secondary" scheme — the lavender nav bar skin. The original
   theme generated these rules; without them the bar is transparent.
--------------------------------------------------------------------------- */
.top-bar-wrapper.fn-scheme-secondary {
    background-color: var(--yc-lavender);
    color: rgba(51, 51, 51, 1);
}
.top-bar-wrapper.fn-scheme-secondary ul:not(.title-area) ul.dropdown { background-color: var(--yc-lavender); }
.top-bar-wrapper.fn-scheme-secondary .site-title,
.top-bar-wrapper.fn-scheme-secondary a:not(.button) { color: rgba(51, 51, 51, 1) !important; }
.top-bar-wrapper.fn-scheme-secondary .top-bar .toggle-topbar.menu-icon a span::after {
    box-shadow: 0 0 0 1px rgba(51, 51, 51, 1), 0 7px 0 1px rgba(51, 51, 51, 1), 0 14px 0 1px rgba(51, 51, 51, 1);
}
.top-bar-wrapper.fixedShadow { box-shadow: rgba(0, 0, 0, 0.40) 0 1px 5px; }

/* Links inside brand copy: plum and bold (start page, footer, etc.) */
.brand-text a, .brand-text a:hover, .brand-text a:focus {
    color: var(--yc-plum);
    font-weight: 700;
}

/* Inside panels the framework colors text #333 at higher specificity —
   re-assert the brand color (footer, program panels). */
.panel .brand-text,
.panel p.brand-text, .panel .brand-text p,
.panel h1.brand-text, .panel h2.brand-text, .panel h3.brand-text { color: var(--yc-plum); }

/* Foundation reads the top-bar breakpoint from this rule (framework quirk). */
meta.foundation-mq-topbar { font-family: "/only screen and (min-width:40.063em)/" !important; width: 40.063em !important; }