/* ===========================================================================
   Velvet Waves Studio — Brand theme
   ===========================================================================
   The brand layer: palette, typography, background, buttons, panels.
   Loads AFTER vendor/foundation-theme.css (framework) and BEFORE site.css
   (page components), overriding framework defaults with the studio brand.

   Change a brand color once here and it changes across the whole site.
   ======================================================================== */

:root {
    /* --- Brand palette ------------------------------------------------- */
    --vw-gold:        rgba(214, 170, 17, 1);   /* signature gold  #d6aa11 */
    --vw-gold-dark:   rgba(203, 161, 16, 1);   /* gold hover      #cba110 */
    --vw-charcoal:    rgba(76, 76, 76, 1);     /* primary gray    #4c4c4c */
    --vw-ink:         rgba(34, 34, 34, 1);     /* body text       #222222 */
    --vw-white:       rgba(255, 255, 255, 1);

    /* --- Translucent panel fills (over the wave background photo) ------ */
    --vw-panel-shade:         rgba(0, 0, 0, 0.29);   /* subtle page tint   */
    --vw-panel-charcoal:      rgba(76, 76, 76, 0.75);/* content panels     */
    --vw-panel-charcoal-dark: rgba(76, 76, 76, 0.85);/* embeds / hours     */
    --vw-panel-black:         rgba(0, 0, 0, 0.60);   /* service-card veil  */

    /* --- Type stacks ---------------------------------------------------- */
    --vw-font-display: "gravesend-sans", sans-serif;          /* Typekit  */
    --vw-font-body:    "Mulish", sans-serif;                  /* Google   */
    --vw-font-heading: "Open Sans", sans-serif;               /* Google   */
}

/* ---------------------------------------------------------------------------
   Text selection
--------------------------------------------------------------------------- */
::-moz-selection { color: var(--vw-white); background: var(--vw-charcoal); }
::selection      { color: var(--vw-white); background: var(--vw-charcoal); }

/* ---------------------------------------------------------------------------
   Page background
   A fixed, full-viewport layer carries the wave photo so it stays put while
   the page scrolls — works on iOS too (unlike background-attachment: fixed,
   which is why the original site used a JS slideshow for this).
--------------------------------------------------------------------------- */
body {
    background-color: #333333;
    color: var(--vw-ink);
}
body::before {
    content: "";
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: url("../images/background-waves.jpg") no-repeat center center;
    background-size: cover;
}

/* ---------------------------------------------------------------------------
   Typography
--------------------------------------------------------------------------- */
body, .font-family-text {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
}
/* All paragraph copy uses Mulish */
p, .font-family-text { font-family: var(--vw-font-body) !important; font-style: normal; font-weight: 400; }

h1, .font-family-h1 { font-family: var(--vw-font-heading); font-style: normal; font-weight: 300; }
h2, h3, h4, h5, h6, .font-family-h2 { font-family: var(--vw-font-heading); font-style: normal; font-weight: 600; }

h1, h2, h3, h4, h5, h6 { color: var(--vw-ink); margin-top: 0; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit !important; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { opacity: 0.8; color: inherit !important; }

/* Heading scale — small screens first, larger from the medium breakpoint. */
h1 { font-size: 2.12rem; }
h2 { font-size: 1.69rem; }
h3 { font-size: 1.38rem; }
h4 { font-size: 1.12rem; }
h5 { font-size: 1.12rem; }
h6 { font-size: 1.00rem; }
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; }
}

/* Gold display headings (gravesend-sans) used for every section title.
   The .panel-scoped rule is needed because the framework sets its own
   heading color inside panels (.panel h2 {color:#333}) at higher
   specificity than a lone class. */
.brand-heading,
.panel .brand-heading {
    font-family: var(--vw-font-display) !important;
    color: var(--vw-gold);
}

/* Links */
a { color: rgba(0, 140, 186, 1); text-decoration: none; font-weight: inherit; }
a:hover, a:focus { color: rgba(0, 102, 136, 1); }

/* ".alt" = light-on-dark text (white copy over the photo/panels). */
.alt { color: var(--vw-white); }
.alt small { color: var(--vw-white); }
h1.alt, h2.alt, h3.alt, h4.alt, h5.alt, h6.alt { color: var(--vw-white); }

img { color: #333333; }

/* ---------------------------------------------------------------------------
   Grid tweaks (Foundation 5)
   The design uses a 1000px content column and slightly tightened gutters.
--------------------------------------------------------------------------- */
.row { max-width: 1000px !important; }
.row.max-edge { max-width: 100% !important; }   /* full-bleed rows          */
.column, .columns { padding-left: 0.94rem; padding-right: 0.94rem; }
.row .row { margin: 0 -0.94rem; }

/* ---------------------------------------------------------------------------
   Buttons
   The site uses one style everywhere: the gold "ghost" (outlined) button.
--------------------------------------------------------------------------- */
.button { background-color: var(--vw-charcoal); color: var(--vw-white); }
.button:hover { color: var(--vw-white); background-color: rgba(72, 72, 72, 1); }

.button.ghost {
    background-color: transparent;
    border-width: 1px;
    border-color: var(--vw-charcoal);
    color: var(--vw-charcoal);
}
.button.ghost:hover {
    color: var(--vw-white);
    border-color: rgba(72, 72, 72, 1);
    background-color: rgba(72, 72, 72, 1);
}

/* Gold variant — the brand call-to-action. */
.button.gold { background-color: var(--vw-gold); color: var(--vw-white); }
.button.gold:hover { background-color: var(--vw-gold-dark); }
.button.gold.ghost {
    background-color: transparent;
    border-color: var(--vw-gold);
    color: var(--vw-gold);
}
.button.gold.ghost:hover {
    color: var(--vw-white);
    border-color: var(--vw-gold-dark);
    background-color: var(--vw-gold-dark);
}

/* Centered button wrapper — buttons are inline-block, so the wrapper centers. */
.btn-row { text-align: center; margin: 16px 0; }

/* ---------------------------------------------------------------------------
   Panels
   Translucent boxes layered over the wave photo. All share the same base;
   the modifier sets the fill.
--------------------------------------------------------------------------- */
.panel.custom {
    padding: 1.25rem;
    border-width: 0;
    margin-bottom: 0;
    background-color: transparent;
    border-color: transparent;
}
.panel p { color: var(--vw-ink); }
.panel p.alt { color: var(--vw-white); }

.panel-shade         { background-color: var(--vw-panel-shade);         border-color: var(--vw-panel-shade); }
.panel-charcoal      { background-color: var(--vw-panel-charcoal);      border-color: var(--vw-panel-charcoal); }
.panel-charcoal-dark { background-color: var(--vw-panel-charcoal-dark); border-color: var(--vw-panel-charcoal-dark); }

/* ---------------------------------------------------------------------------
   Misc
--------------------------------------------------------------------------- */
hr, blockquote { border-color: rgba(221, 221, 221, 1); }
.copyright { color: var(--vw-ink); font-size: 0.9rem; }

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