@charset "UTF-8";

/* ============================================ */
/* ===== Winn's: page layout (front end) ====== */
/* ============================================ */

html { scroll-padding-top: 130px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { background: var(--cl-background) url(../images/winns/noise.png); color: var(--cl-text); line-height: 1.6; padding-bottom: 72px; }
@media (min-width: 900px) { body { padding-bottom: 0; } }
a { color: var(--cl-primary); text-underline-offset: 3px; }
a:hover { color: var(--cl-rollover); }
:focus-visible { outline: 3px solid var(--cl-secondary); outline-offset: 2px; }
.container { padding-inline: var(--winns-gutter); width: 100%; }
.center { text-align: center; }
.skip-to-main { background: var(--cl-primary); z-index: 100; }

/* ---------- Top bar ---------- */
.topbar { background: var(--cl-rollover); color: var(--cl-light); font-size: .8rem; letter-spacing: .04em; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.topbar a { color: var(--cl-light); text-decoration: none; margin-left: 1.25rem; font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; }
.topbar a span { font: 400 1.05rem/1 var(--ff-display); letter-spacing: .06em; color: var(--winns-salmon-soft); }
.topbar a:hover { color: #fff; }
@media (max-width: 640px) {
    .topbar__text { display: none; }
    .topbar__phones { width: 100%; display: flex; justify-content: space-between; }
    .topbar a { margin: 0; }
}

/* ---------- Header ---------- */
.main__header {
    position: sticky; top: 0; z-index: 50; padding: 0;
    background: rgba(239, 233, 216, .96) url(../images/winns/noise.png);
    border-bottom: 1px solid var(--winns-line);
    box-shadow: 0 3px 0 -1px var(--cl-background), 0 4px 0 -1px var(--winns-line);
}
.admin-bar .main__header { top: 32px; }
@media (max-width: 782px) { .admin-bar .main__header { top: 0; } }
.main__header--content { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; position: relative; }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--cl-primary); }
.brand img { width: 64px; height: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--ff-script); font-size: 1.9rem; text-shadow: 2px 2px 0 var(--cl-complementary); }
.brand__sub { font: 400 1.1rem/1 var(--ff-display); letter-spacing: .08em; }

.main__navigation ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.main__navigation a { display: block; font: 400 1.35rem/1 var(--ff-display); letter-spacing: .1em; color: var(--cl-primary); text-decoration: none; padding: .9rem 1rem; }
.main__navigation a:hover { color: var(--cl-rollover); }
/* The old site's hanging ribbon tab, kept as the active state */
.main__navigation .current-menu-item > a,
.main__navigation .current_page_item > a {
    color: var(--cl-light); background: var(--cl-primary); padding-bottom: 1.4rem; margin-bottom: -.5rem;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
}

.main__header--menu { display: none; }
.mobile__menu--button {
    position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 44px; padding: 0;
    border: 1px solid var(--winns-line); background: var(--cl-light); border-radius: var(--winns-radius); cursor: pointer;
    font: 400 1.2rem/1 var(--ff-display); letter-spacing: .08em; color: var(--cl-primary);
}
.mobile__menu--button span.mobile__menu--lines,
.mobile__menu--button span.mobile__menu--lines::before,
.mobile__menu--button span.mobile__menu--lines::after { width: 1.1rem; height: 2px; background: var(--cl-primary); left: calc(50% - .55rem); }
.mobile__menu--button span.mobile__menu--lines::before { margin-top: -.4rem; left: 0; }
.mobile__menu--button span.mobile__menu--lines::after { margin-top: .4rem; left: 0; }
.mobile__menu--button:hover span.mobile__menu--lines,
.mobile__menu--button:hover span.mobile__menu--lines::before,
.mobile__menu--button:hover span.mobile__menu--lines::after { background: var(--cl-rollover); }
.mobile__menu--button.mobile__menu--opened span.mobile__menu--lines { background: transparent; }
.mobile__menu--button.mobile__menu--opened span.mobile__menu--lines::before,
.mobile__menu--button.mobile__menu--opened span.mobile__menu--lines::after { background: var(--cl-primary); margin-top: 0; }

@media (max-width: 899px) {
    .main__header--menu { display: block; }
    .main__header--navigation { position: absolute; left: 0; right: 0; top: 100%; background: var(--cl-light); border-bottom: 2px solid var(--cl-primary); display: none; }
    .main__header--navigation.header__navigation--active { display: block; }
    .main__navigation ul { flex-direction: column; padding: .5rem var(--winns-gutter) 1rem; }
    .main__navigation a { padding: .8rem 0; border-bottom: 1px dotted var(--winns-line); }
    .main__navigation .current-menu-item > a,
    .main__navigation .current_page_item > a { clip-path: none; background: none; color: var(--cl-rollover); margin: 0; padding-bottom: .8rem; }
    .main__navigation .current-menu-item > a::before,
    .main__navigation .current_page_item > a::before { content: "▸ "; }
    .brand img { width: 52px; }
    .brand__name { font-size: 1.55rem; }
    body.no-scroll { height: auto; overflow: visible; }
}

/* ---------- Page heading ---------- */
.page-head { padding-block: 2.5rem 1rem; text-align: center; }
.page-title { font: 400 clamp(2.8rem, 7vw, 4.2rem)/1.05 var(--ff-display); color: var(--cl-primary); letter-spacing: .04em; margin: 0 0 .25rem; }
.page-intro { margin: 0 auto; max-width: 60ch; }

/* ---------- Content flow ---------- */
.page--content > :not(.alignfull):not(.is-style-section):not(.is-style-section-paper) { max-width: var(--w-cont-m); margin-inline: auto; padding-inline: var(--winns-gutter); }
.page--content > :last-child:not(.is-style-section):not(.is-style-section-paper):not(.alignfull) { margin-bottom: 4rem; }
.wp-block-group.is-style-section,
.wp-block-group.is-style-section-paper { padding: clamp(2.5rem, 6vw, 4.5rem) var(--winns-gutter); margin: 0; }
.wp-block-group.is-style-section-paper { background: rgba(251, 248, 238, .7); border-block: 1px solid var(--winns-line); }
:is(.is-style-section, .is-style-section-paper) > *,
:is(.is-style-section, .is-style-section-paper) > .wp-block-group__inner-container > * { max-width: var(--w-cont-m); margin-left: auto !important; margin-right: auto !important; }
.wp-block-separator.is-style-default, .wp-block-separator:not([class*=is-style]) { border: 0; height: 5px; margin: 0 auto; max-width: var(--w-cont-m); border-top: 1px solid var(--winns-line); border-bottom: 1px dotted var(--winns-line); background: none; opacity: 1; }
.editor--content .wp-block-columns { gap: 2rem 1.5rem; margin-bottom: 0; }
.editor--content .wp-block-buttons.is-layout-flex { gap: .6rem; }
.editor--content .lead, .editor--content p.has-large-font-size { font-size: 1.2rem !important; font-weight: 500; }

/* Space between a row of columns/cards and the text or buttons after it */
.page--content .wp-block-columns + * { margin-top: 2.5rem !important; }
.page--content .wp-block-columns + p + .wp-block-buttons { margin-top: 1.25rem; }

/* Core buttons get the .action look (beats WP's default global button styles) */
.wp-block-button .wp-block-button__link { font: 600 .95rem/1 var(--ff-primary); padding: .85rem 1.2rem; min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--winns-radius); background: var(--cl-primary); color: var(--cl-light); border: 2px solid var(--cl-primary); text-decoration: none; }
.wp-block-button .wp-block-button__link:hover { background: var(--cl-rollover); border-color: var(--cl-rollover); color: #fff; }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--cl-primary); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--cl-primary); color: var(--cl-light); }

/* ---------- Gallery (core gallery + lightbox) ---------- */
.wp-block-gallery.has-nested-images figure.wp-block-image img { border: 5px solid var(--cl-light); box-shadow: var(--winns-shadow); border-radius: var(--winns-radius); }

/* ---------- Contact Form 7 ---------- */
.wpcf7 form { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.wpcf7 form > p, .wpcf7 .field { margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.wpcf7 .field--full, .wpcf7 form > .wpcf7-response-output, .wpcf7 form > .form-actions { grid-column: 1 / -1; }
.wpcf7 label { font-weight: 600; font-size: .9rem; display: block; margin-bottom: .3rem; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 select, .wpcf7 textarea {
    display: block; width: 100%; font: inherit; padding: .7rem .8rem; border: 1px solid var(--winns-line); border-radius: var(--winns-radius); background: #fff; min-height: 44px; color: var(--cl-text);
}
.wpcf7 select {
    appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.5rem; line-height: 1.4;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23741D01' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .9rem center;
}
.wpcf7 textarea { min-height: 140px; }
.wpcf7 input:focus-visible, .wpcf7 select:focus-visible, .wpcf7 textarea:focus-visible { outline: 3px solid var(--cl-secondary); outline-offset: 1px; }
.wpcf7 .wpcf7-submit { font: 600 .95rem/1 var(--ff-primary); padding: .85rem 1.3rem; min-height: 44px; border-radius: var(--winns-radius); background: var(--cl-primary); color: var(--cl-light); border: 2px solid var(--cl-primary); cursor: pointer; justify-self: start; }
.wpcf7 .wpcf7-submit:hover { background: var(--cl-rollover); }
.wpcf7-not-valid-tip { color: #B3261E; font-size: .85rem; margin-top: .25rem; }
.wpcf7 form .wpcf7-response-output { margin: 0; padding: .75rem 1rem; border-radius: var(--winns-radius); }
.wpcf7-spinner { margin: 0 0 0 .5rem; }

/* ---------- Footer ---------- */
.main__footer { background: var(--cl-primary) url(../images/winns/noise.png); background-blend-mode: multiply; color: #F6E9DF; padding-top: 3rem; }
.footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.main__footer h3 { font: 400 1.9rem/1.1 var(--ff-display); letter-spacing: .05em; color: #fff; margin: 0 0 .5rem; }
.main__footer p { margin: 0 0 1rem; }
.main__footer a { color: #fff; text-decoration: underline; }
.main__footer .hours th, .main__footer .hours td { border-color: rgba(255, 255, 255, .25); }
.main__footer .hours tr.is-today { color: var(--winns-salmon-soft); }
.footer__brand img { width: 130px; margin-bottom: 1rem; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3)); }
.social a { margin-right: 1rem; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.footer__legal { border-top: 1px dotted rgba(255, 255, 255, .35); margin-top: 2rem; padding-block: .5rem; font-size: .8rem; color: #E6CFC2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 1.5rem; }
.footer__legal > span { display: inline-flex; align-items: center; min-height: 44px; }
.footer__credit a { color: #fff; margin-left: .3em; }

/* ---------- Mobile action bar ---------- */
.action-bar { position: fixed; inset: auto 0 0 0; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--cl-rollover); border-top: 2px solid var(--cl-secondary); padding-bottom: env(safe-area-inset-bottom); }
.action-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; padding: .55rem .25rem; min-height: 56px; color: var(--cl-light); text-decoration: none; font-size: .8rem; font-weight: 600; }
.action-bar a + a { border-left: 1px solid rgba(255, 255, 255, .15); }
.action-bar svg { width: 22px; height: 22px; fill: currentColor; }
@media (min-width: 900px) { .action-bar { display: none; } }

/* ---------- 404 ---------- */
.error-404__code { font: 400 1.2rem/1 var(--ff-display); letter-spacing: .2em; color: var(--cl-secondary); margin: 0 0 .25rem; }
.error-404__body { max-width: 720px; text-align: center; padding-bottom: 4rem; }
.haiku { margin: 1.5rem auto 2rem; padding: 2rem 1.5rem; background: var(--cl-light); border: 1px solid var(--winns-line); border-top: 6px solid var(--cl-primary); border-radius: var(--winns-radius); box-shadow: var(--winns-shadow); position: relative; }
.haiku::before { content: ""; display: block; width: 72px; height: 2px; margin: 0 auto 1.25rem; border-top: 1px solid var(--winns-line); border-bottom: 1px dotted var(--winns-line); height: 4px; }
.haiku__poem { font: italic 500 clamp(1.25rem, 4.5vw, 1.6rem)/1.6 var(--ff-primary); color: var(--cl-rollover); margin: 0; }
.haiku figcaption { font: 400 1rem/1 var(--ff-display); letter-spacing: .14em; color: var(--cl-gray); }
.error-404__text { margin: 0 auto 1.5rem; max-width: 52ch; }
.error-404__actions { justify-content: center; margin-bottom: 1.5rem; }
.error-404__call { font-size: .95rem; color: var(--cl-gray); }
.error-404__call a { display: inline-block; padding-block: .6rem; font-weight: 600; }
.main__footer p a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; }
.haiku__poem span { white-space: nowrap; }
@media (max-width: 600px) {
    .haiku { padding: 1.5rem .75rem; }
    .haiku__poem { font-size: clamp(.95rem, 4.6vw, 1.25rem); }
}