/* ============================================================
   contact-us.css

   Typography from Wix source:
     "CONNECT WITH US!"  — Jockey One 55px, #BADA55 green
     "HOURS/PHONE/LOCATION" — Jockey One 32px, #BADA55 green
     Hours/address text  — Helvetica 15px, #c3baa3 gold
     "Follow our adventures!" — Caveat 32px, #BADA55 green, rotated

   Layout: three equal columns inside 980px container
   Social icons: circular white border, 40px
   Map: centered, 660px wide, 185px tall in original (we go wider)
============================================================ */

.cu-page
{
    background-color: var(--col-bg);
    padding-bottom:   3rem;
}


/* ============================================================
   TOP DOTTED RULES
   Two short dotted lines above the center and right columns.
   Left column has no top rule — matches original screenshot.
============================================================ */
.cu-top-rules
{
    max-width: var(--site-width);
    margin:    0 auto;
    padding:   0 1rem;
    display:   grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:       2rem;
}

.cu-rule-center,
.cu-rule-right
{
    border-top: 2px dotted rgba(195, 186, 163, 0.4);
    margin-top: 1.5rem;
}

/* No rule for left column — just leave it empty */
.cu-top-rules::before
{
    content: '';
}


/* ============================================================
   THREE-COLUMN INFO SECTION
============================================================ */
.cu-info
{
    padding: 0 1rem 2rem;
}

.cu-info-inner
{
    max-width:             var(--site-width);
    margin:                0 auto;
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:                   2rem;
    align-items:           start;
    padding-top:           2.5rem;
}

/* ---- Column 1: Connect + Follow + Social ---- */
.cu-connect
{
    display:        flex;
    flex-direction: column;
    gap:            1.25rem;
}

.cu-connect-heading
{
    font-family:    var(--font-display);
    font-size:      clamp(2rem, 4vw, 3.4rem);
    line-height:    0.9;
    color:          var(--col-nav-text);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* "Follow our adventures!" — Caveat, italic, rotated slightly */
.cu-follow
{
    font-family:    var(--font-nav);
    font-size:      1.8rem;
    color:          var(--col-nav-text);
    font-style:     italic;
    line-height:    1.15;
    display:        inline-block;
    transform:      rotate(-10deg);
    transform-origin: left center;
    margin-left:    0.5rem;
}

/* Social icons — circular white border, side by side */
.cu-social
{
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    margin-top:  0.5rem;
}

.cu-social a
{
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            44px;
    height:           44px;
    border:           2px solid #ffffff;
    border-radius:    50%;
    transition:       background-color 0.3s ease, border-color 0.3s ease;
    overflow:         hidden;
    padding:          6px;
}

.cu-social a:hover
{
    background-color: rgba(255, 255, 255, 0.15);
}

.cu-social img
{
    width:      100%;
    height:     100%;
    object-fit: contain;
    filter:     brightness(0) invert(1);   /* make icons white */
}


/* ---- Column 2: Hours ---- */
.cu-hours { }

.cu-col-heading
{
    font-family:    var(--font-display);
    font-size:      clamp(1.4rem, 2.5vw, 2rem);
    color:          var(--col-nav-text);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom:  1rem;
}

.cu-hours-list
{
    display:               grid;
    grid-template-columns: 1fr;
    row-gap:               0.15rem;
}

.cu-hours-list dt
{
    font-size:      0.93rem;
    color:          var(--col-gold);
    margin-top:     0.75rem;
    letter-spacing: 0.02em;
}

.cu-hours-list dt:first-child { margin-top: 0; }

.cu-hours-list dd
{
    font-size: 0.93rem;
    color:     var(--col-gold);
    margin:    0;
}


/* ---- Column 3: Phone + Location ---- */
.cu-contact-details
{
    display:        flex;
    flex-direction: column;
    gap:            2rem;
}

.cu-phone p,
.cu-location p
{
    font-size:   0.93rem;
    color:       var(--col-gold);
    line-height: 1.7;
}

.cu-phone a
{
    color:      var(--col-gold);
    transition: color 0.3s ease;
}

.cu-phone a:hover { color: var(--col-cream); }


/* ============================================================
   GOOGLE MAPS IFRAME
   Centered, with a small top margin to breathe from the info section
============================================================ */
.cu-map
{
    padding: 1rem 1rem 0;
}

.cu-map-inner
{
    max-width: var(--site-width);
    margin:    0 auto;
    height:    220px;           /* matches original ~185px, slightly taller for usability */
    overflow:  hidden;
}

.cu-map-inner iframe
{
    width:   100%;
    height:  100%;
    border:  0;
    display: block;
}


/* ============================================================
   Responsive
============================================================ */
@media (max-width: 720px)
{
    .cu-top-rules
    {
        display: none;    /* hide decorative rules on mobile */
    }

    .cu-info-inner
    {
        grid-template-columns: 1fr;
        padding-top:           1.5rem;
        gap:                   2.5rem;
    }

    .cu-follow
    {
        transform: none;
    }

    .cu-map-inner
    {
        height: 280px;   /* taller on mobile for usability */
    }
}