/* ==========================================================================
   Sully's — Layout for the two surviving native template parts:
     - parts/nav.php           (header + mobile menu fallback)
     - parts/footer-block.php  (footer fallback — postcards, big nav, address)

   When these are replaced by Elementor Theme Builder docs (header / footer),
   the corresponding sections below become unused and can be deleted too.
   ========================================================================== */


/* ==========================================================================
   HEADER (parts/nav.php fallback)
   ========================================================================== */
.sullys-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: var(--z-header);
    padding: var(--space-3) var(--container-pad);
    pointer-events: none;
}
.sullys-header > * { pointer-events: auto; }
.sullys-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: var(--space-3);
}
.sullys-header-nav-left ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.2em;
}
.sullys-header-logo {
    color: var(--fg-primary);
    justify-self: center;
    display: inline-block;
}
.sullys-header-right {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: flex-end;
}
.sullys-theme-switch--header { flex-shrink: 0; }

/* SULLYS wordmark (the dot replaces the apostrophe) */
.sullys-wordmark {
    font-family: var(--font-primary);
    color: var(--fg-primary);
    line-height: 1;
    display: inline-flex;
    align-items: flex-start;
}
.sullys-wordmark > span { display: inline-block; }
.sullys-wordmark-dot {
    width: 0.18em;
    height: 0.18em;
    background: var(--accent-hot);
    border-radius: 50%;
    margin-top: 0.18em;
    margin-left: 0.02em;
    margin-right: 0.02em;
    align-self: flex-start;
    flex-shrink: 0;
}
.sullys-header--inner .sullys-wordmark { font-size: clamp(1rem, 1.4vw, 1.4rem); }
.sullys-header--inner .sullys-wordmark-dot { margin-top: 0.15em; }

/* Bullet/star ornament (used between footer big-nav items) */
.sullys-bullet {
    color: var(--accent-hot);
    display: inline-block;
    transform: translateY(-0.05em);
    margin: 0 0.15em;
}


/* ==========================================================================
   MOBILE MENU (hamburger + slide-in overlay)
   ========================================================================== */
.sullys-mobile-toggle {
    display: inline-block;
    background: transparent; border: 0;
    width: 36px; height: 36px;
    padding: 0;
    cursor: none;
    position: absolute;
    top: var(--space-3);
    right: var(--container-pad);
    z-index: 5;
    color: var(--fg-primary);
}
.sullys-mobile-toggle span {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 22px; height: 1.5px;
    background: var(--fg-primary);
    transition: transform 0.3s var(--ease-out-cubic), top 0.3s, opacity 0.3s;
}
.sullys-mobile-toggle span:nth-child(1) { top: 38%; }
.sullys-mobile-toggle span:nth-child(2) { top: 58%; }
body.menu-open .sullys-mobile-toggle span:nth-child(1) { top: 50%; transform: translateX(-50%) rotate(45deg); }
body.menu-open .sullys-mobile-toggle span:nth-child(2) { top: 50%; transform: translateX(-50%) rotate(-45deg); }

.sullys-mobile-menu {
    position: fixed;
    top: 0; right: 0;
    width: 100%; max-width: 100%;
    height: 100vh; height: 100dvh;
    background: var(--bg-page);
    z-index: var(--z-menu);
    padding: var(--space-5) var(--container-pad);
    transform: translateX(100%);
    transition: transform 0.5s var(--ease-out-expo);
    display: flex; flex-direction: column;
    overflow-y: auto;
}
body.menu-open .sullys-mobile-menu { transform: translateX(0); }

.sullys-mobile-close {
    align-self: flex-end;
    background: transparent; border: 0;
    color: var(--fg-primary);
    cursor: none;
    padding: var(--space-2);
}
.sullys-mobile-menu-list {
    list-style: none; margin: auto 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.2em;
    text-align: right;
}
.sullys-mobile-link {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 8vw, 4rem);
    color: #FFFFFF;
    text-transform: uppercase;
    line-height: 1.05;
    transition: color 0.25s var(--ease-out-cubic);
}
.sullys-mobile-link:hover,
.sullys-mobile-link.is-active {
    color: var(--accent-soft, #F8A06A);
}
.sullys-mobile-bottom {
    margin-top: auto;
    padding-top: var(--space-5);
    display: flex; justify-content: space-between; align-items: center;
}
.sullys-mobile-socials {
    display: flex; gap: var(--space-3);
}
.sullys-mobile-socials a { color: var(--fg-primary); }


/* ==========================================================================
   FOOTER (parts/footer-block.php fallback)
   ========================================================================== */
.sullys-footer {
    padding: var(--space-7) var(--container-pad) var(--space-5);
    background: var(--bg-page);
    color: var(--fg-primary);
    position: relative;
}
.sullys-footer-postcards {
    text-align: center;
    margin-bottom: var(--space-7);
}
.sullys-stamp {
    width: clamp(80px, 7vw, 110px);
    margin: 0 auto var(--space-3);
}
.sullys-footer-big-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.4em 0.6em;
    text-align: center;
    margin-bottom: var(--space-6);
    line-height: var(--lh-tight);
}
.sullys-footer-big-nav .sullys-bullet {
    font-size: 0.6em;
    align-self: center;
}
.sullys-footer-switch-wrap {
    display: flex;
    justify-content: center;
    margin: var(--space-4) 0;
}
.sullys-footer-meta {
    text-align: center;
    color: var(--fg-muted);
}
.sullys-footer-meta a { color: inherit; }

/* Postcard cards: visual identity (paper colour, padding, shadow) and
   per-card layout (size, X/Y offset, rotation) are now owned by the
   "Postcards Stack" widget (see widget-postcards.php + components.css).
   The old block here used to set `aspect-ratio: 1/1` which forced every
   image to square regardless of the card box — kept here as a comment
   so the regression doesn't sneak back. */

/* Minimal footer (Bookings page) */
.sullys-footer--minimal {
    padding: var(--space-6) var(--container-pad);
    text-align: center;
}
.sullys-credit-minimal {
    color: var(--accent-hot);
}


/* ==========================================================================
   ELEMENTOR FORMS — file upload shell only.

   Site-wide form styling for text-like fields (border, padding, colour,
   placeholder, label typography) was REMOVED 2026-05-02 so each form's
   appearance is fully controlled from its widget's Style tab in Elementor.

   The ONE exception is <input type="file">. Elementor Pro's Style → Field
   controls scope to .elementor-field-textual, which doesn't include the
   file input. Without a site-wide rule, the file field has no border /
   padding / background and looks broken next to its styled siblings.

   The rules below give the file input the same shell as a text field,
   using the theme's --form-border / --form-fg tokens (so it flips with
   the theme switcher). To customise per-instance, add Custom CSS in the
   widget's Advanced tab targeting `selector input[type="file"]`.
   ========================================================================== */
.elementor-form input[type="file"] {
    background-color: transparent;
    border: 1px solid var(--form-border);
    color: var(--form-fg);
    font-family: inherit;
    border-radius: 0;
    padding: 12px 14px;
    width: 100%;
    cursor: pointer;
    line-height: 1.4;
    transition: border-color 0.2s ease;
}
.elementor-form input[type="file"]:focus {
    outline: none;
    border-color: var(--form-fg);
}
/* Native "Choose File" button — neutralised so it doesn't look out of
   place. The widget's Custom CSS can hide / re-skin it further. */
.elementor-form input[type="file"]::file-selector-button,
.elementor-form input[type="file"]::-webkit-file-upload-button {
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}


/* ==========================================================================
   INLINE ICON UTILITY
   Drop this class on any <img> inside a Text Editor widget (or anywhere
   else) to size the image relative to the surrounding text and align it
   to the cap-line. Width auto-scales from the height so the image keeps
   its native aspect ratio.

   Usage:
     <img class="sullys-inline-icon" src="..." alt="">
     <img class="sullys-inline-icon" style="height: 1em;" src="..." alt="">

   To override per-instance: use inline style="height: 0.6em" or similar.
   The vertical-align nudges the icon up slightly so it visually centres
   on uppercase text — adjust style="vertical-align: -0.05em" for finer
   control.
   ========================================================================== */
.sullys-inline-icon {
    display: inline-block;
    height: 0.8em;
    width: auto;
    max-width: none;          /* defeat the global img max-width:100% */
    vertical-align: -0.1em;
    margin: 0 0.2em;
}


/* ==========================================================================
   ACCESSIBILITY HELPERS (header.php skip-link)
   ========================================================================== */
.skip-link {
    position: absolute; left: -9999px;
    top: -9999px;
}
.skip-link:focus {
    left: 8px; top: 8px;
    background: var(--sullys-cream); color: var(--sullys-navy);
    padding: 8px 12px; z-index: 10000;
}
.screen-reader-text {
    border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
    height: 1px; width: 1px; margin: -1px; overflow: hidden;
    padding: 0; position: absolute; word-wrap: normal !important;
}


/* ==========================================================================
   BREAKPOINTS — header collapses to logo + hamburger on mobile
   ========================================================================== */
@media (max-width: 899px) {
    .sullys-header-inner {
        grid-template-columns: 1fr auto;
    }
    .sullys-header-nav-left,
    .sullys-header-right {
        display: none;
    }
}

@media (min-width: 900px) {
    .sullys-mobile-toggle { display: none; }
    .sullys-mobile-menu   { display: none; }
}