/* ============================================================
   Dakota Point Brewing — site.css

   Color palette (decoded from Wix CSS variables):
     Page bg:        #393d32  (color_11, dark olive)
     Header bg:      #393d32  (color_36) + rgba(46,105,52,0.8) green wash
     Nav text:       #BADA55  (A WIX joke, but a nice color)
     Nav hover:      #f1e3c8  (color_37, cream)
     Nav active:     #ffffff
     Body text:      #f3efe7  (color_15, near-white)
     Muted text:     #95907d  (color_39)
     Cream/border:   #f1e3c8  (color_47)
     Gold:           #c3baa3  (color_14)

   Nav font: Caveat cursive (matches Wix --fnt on the nav component)
   Display font: Jockey One (used on buttons in the original)
============================================================ */

/* ============================================================
   Custom Properties
============================================================ */
:root
{
    --col-bg:             #393d32;
    --col-bg-header:      #393d32;
    --col-bg-header-tint: rgba(46, 105, 52, 0.8);
    --col-bg-footer:      rgba(149, 144, 125, 0.15);
    --col-nav-text:       #BADA55; /* #48c456; */
    --col-nav-hover:      #f1e3c8;
    --col-nav-active:     #ffffff;
    --col-body-text:      #f3efe7;
    --col-muted:          #95907d;
    --col-cream:          #f1e3c8;
    --col-gold:           #c3baa3;
    --col-border:         rgba(241, 227, 200, 0.2);

    --font-nav:     'Caveat', cursive;
    --font-display: 'Jockey One', sans-serif;
    --font-body:    'Helvetica Neue', helvetica, sans-serif;

    /* Height of the visible header bar */
    --header-height: 48px;

    /* How far the logo hangs below the header bar into page content */
    --logo-overflow: 60px;

    --site-width: 980px;
    --transition: color 0.4s ease, background-color 0.4s ease;
}

/* ============================================================
   Reset / Base
============================================================ */
*, *::before, *::after
{
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

html { height: 100%; }

body
{
    min-height:              100%;
    background-color:        var(--col-bg);
    color:                   var(--col-body-text);
    font-family:             var(--font-body);
    font-size:               16px;
    line-height:             1.4;
    display:                 flex;
    flex-direction:          column;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a    { color: inherit; text-decoration: none; }
img  { display: block; max-width: 100%; }
ul   { list-style: none; }

/* ============================================================
   Header

   The logo and nav are one centered unit inside .header-top.
   .header-top is a flex row with three children:

     [.nav-spacer flex:1] [.site-logo] [#site-nav flex:1]

   The spacer and nav both take equal remaining space, so the
   logo is always pinned to the horizontal center of the page.
   The nav fills the right half; spacer fills the left half.

   The logo overflows below the header bar by --logo-overflow
   using a negative margin-bottom. overflow:visible on the
   header lets it paint over the content beneath.
============================================================ */
#site-header
{
    position:         sticky;
    top:              0;
    z-index:          50;
    width:            100%;
    height:           var(--header-height);
    overflow:         visible;
    background-color: var(--col-bg-header);
    background-image: linear-gradient(
                          var(--col-bg-header-tint),
                          var(--col-bg-header-tint)
                      );
}

.header-inner
{
    width:  100%;
    height: 100%;
}

.header-top
{
    display:     flex;
    align-items: flex-start;   /* logo grows downward from the top of the bar */
    width:       100%;
    height:      100%;
}

/* Left spacer — mirrors the nav width to keep logo centered */
.nav-spacer
{
    flex: 1;
}

/* --------------------------------------------------------
   Logo
   Centered between spacer and nav. Hangs below the header
   bar by --logo-overflow via negative margin-bottom.
   rotate(180deg) corrects the upside-down source file.
-------------------------------------------------------- */
.site-logo
{
    flex-shrink:   0;
    display:       block;
    line-height:   0;
    margin-bottom: calc(-1 * var(--logo-overflow));
    z-index:       51;
}

.site-logo img
{
    width:     150px;
    height:    auto;
    transform: rotate(180deg);
}

/* --------------------------------------------------------
   Nav — right half of header-top
-------------------------------------------------------- */
#site-nav
{
    flex:        1;
    display:     flex;
    align-items: center;
    height:      100%;
}

#site-nav ul
{
    display:     flex;
    align-items: center;
}

#site-nav a
{
    display:     block;
    height:      var(--header-height);
    line-height: var(--header-height);
    padding:     0 10px;
    font-family: var(--font-nav);
    font-size:   16px;
    font-weight: 400;
    color:       var(--col-nav-text);
    white-space: nowrap;
    transition:  var(--transition);
}

#site-nav a:hover               { color: var(--col-nav-hover); }
#site-nav a[aria-current="page"] { color: var(--col-nav-active); font-weight: 600; }

/* --------------------------------------------------------
   Hamburger — hidden on desktop
-------------------------------------------------------- */
#menu-toggle
{
    display:         none;
    flex-direction:  column;
    justify-content: space-between;
    width:           28px;
    height:          20px;
    background:      none;
    border:          none;
    cursor:          pointer;
    padding:         0;
    position:        absolute;
    right:           1rem;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         52;
}

#menu-toggle span
{
    display:          block;
    width:            100%;
    height:           2px;
    background-color: var(--col-nav-text);
    transition:       transform 0.3s ease, opacity 0.3s ease;
}

/* ============================================================
   Main content
   padding-top pushes content below the overflowing logo.
============================================================ */
#main-content
{
    flex:        1;
    padding-top: var(--logo-overflow);
}

/* ============================================================
   Footer
============================================================ */
#site-footer
{
    background-color: var(--col-bg-header);
    background-image: linear-gradient(
                          var(--col-bg-footer),
                          var(--col-bg-footer)
                      );
}

.footer-inner
{
    max-width:       var(--site-width);
    margin:          0 auto;
    padding:         18px 1rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             24px;
    flex-wrap:       wrap;
}

.footer-tagline
{
    font-family:    var(--font-nav);
    font-size:      30px;
    color:          var(--col-nav-text);
    letter-spacing: 0.01em;
    line-height:    1;
}

.footer-social
{
    display:     flex;
    align-items: center;
    gap:         12px;
}

.footer-social a          { display: block; opacity: 1; transition: opacity 0.3s ease; }
.footer-social a:hover    { opacity: 0.75; }
.footer-social img        { width: 28px; height: 28px; object-fit: cover; }

.footer-copyright
{
    width:          100%;
    text-align:     center;
    font-size:      16px;
    color:          var(--col-muted);
    letter-spacing: 0.05em;
    padding-bottom: 8px;
}

.footer-copyright a       { color: var(--col-muted); text-decoration: underline; transition: color 0.3s ease; }
.footer-copyright a:hover { color: var(--col-cream); }

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 768px)
{
    .site-logo img { width: 64px; }

    #site-nav
    {
        display:          none;
        position:         fixed;
        top:              var(--header-height);
        left:             0;
        right:            0;
        background-color: var(--col-bg-header);
        background-image: linear-gradient(rgba(46,105,52,0.97), rgba(46,105,52,0.97));
        flex-direction:   column;
        align-items:      flex-start;
        height:           auto;
        z-index:          49;
    }

    #site-nav.open           { display: flex; }
    #site-nav ul             { flex-direction: column; width: 100%; }

    #site-nav a
    {
        height:        auto;
        line-height:   1.4;
        padding:       0.75rem 1.5rem;
        width:         100%;
        border-bottom: 1px solid var(--col-border);
    }

    #menu-toggle { display: flex; }

    #menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    #menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    #menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

    .footer-inner   { padding: 16px 1rem; gap: 16px; }
    .footer-tagline { font-size: 22px; }
}