/* The Barn: hand-written styles on top of site.css (The Barn's compiled Tailwind stylesheet, which has only the
   classes the original design used). */

:root {
    --ease-out: cubic-bezier(.22, 1, .36, 1);
}

html {
    scroll-behavior: smooth;
}

/* things sliding in from the sides start just off the screen; this stops the page scrolling sideways to them
   ("clip" where it's supported, as it doesn't make the page a scrolling box of its own) */
html,
body {
    overflow-x: hidden;
}

@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

/* the fixed header doesn't cover a section's heading when the menu jumps to it */
section[id] {
    scroll-margin-top: 4rem;
}

@media (min-width: 768px) {
    section[id] {
        scroll-margin-top: 5rem;
    }
}

/* Venue Hire follows The Space, which already ends with its own space, so it doesn't add its own on top (the gap
   is then the same as between the other sections). It keeps room under the header when the menu jumps to it. */
#hire {
    padding-top: 0;
    scroll-margin-top: 7rem;
}

@media (min-width: 768px) {
    #hire {
        scroll-margin-top: 9rem;
    }
}

/* ---------------------------------------------------------------- things appearing as they scroll in
   Content in the CMS marks what appears with data-reveal (see the README):
     data-reveal              fades up              data-reveal="left" / "right"   slides in from that side
     data-reveal="fade"       fades in              data-reveal="zoom"             a picture: uncovered, then settles
     data-reveal="line"       a mortar line drawn from the left ("line-center": from the middle)
     data-reveal-stagger      on a list or grid: its children fade up one after another
   site.js adds .is-in when each comes into view. Hidden only once the page has JavaScript (the html element's
   .js class), and everything shows at once for people who've asked for less motion. */

.js [data-reveal] {
    transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), clip-path 1.3s var(--ease-out);
    transition-delay: var(--reveal-delay, 0s);
}

.js [data-reveal]:not(.is-in) {
    opacity: 0;
    transform: translateY(28px);
}

.js [data-reveal="fade"]:not(.is-in) {
    transform: none;
}

.js [data-reveal="left"]:not(.is-in) {
    transform: translateX(-48px);
}

.js [data-reveal="right"]:not(.is-in) {
    transform: translateX(48px);
}

/* pictures are uncovered from the bottom up, and the photo settles from a little closer */
.js [data-reveal="zoom"] {
    clip-path: inset(0 0 0 0);
}

.js [data-reveal="zoom"]:not(.is-in) {
    opacity: 1;
    transform: none;
    clip-path: inset(100% 0 0 0);
}

/* ("scale" is separate from "transform", so it doesn't fight the hover zoom; the hover's own transitions are kept) */
.js [data-reveal="zoom"] img {
    transition: scale 1.8s var(--ease-out), transform .7s cubic-bezier(.4, 0, .2, 1), filter .7s cubic-bezier(.4, 0, .2, 1);
    transition-delay: var(--reveal-delay, 0s), 0s, 0s;
}

.js [data-reveal="zoom"]:not(.is-in) img {
    scale: 1.12;
}

/* the hero's photos are the whole panel, so they slide and settle instead */
.js [data-reveal="panel"]:not(.is-in) {
    opacity: 0;
    transform: none;
}

.js [data-reveal="panel"] img {
    transition: scale 2.4s var(--ease-out);
}

.js [data-reveal="panel"]:not(.is-in) img {
    scale: 1.1;
}

.js [data-reveal="line"],
.js [data-reveal="line-center"] {
    transform-origin: left center;
    transition: transform 1.2s var(--ease-out), opacity .4s linear;
    transition-delay: var(--reveal-delay, 0s);
}

.js [data-reveal="line-center"] {
    transform-origin: center;
}

.js [data-reveal="line"]:not(.is-in),
.js [data-reveal="line-center"]:not(.is-in) {
    opacity: 1;
    transform: scaleX(0);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .js [data-reveal],
    .js [data-reveal]:not(.is-in),
    .js [data-reveal] img {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        scale: none !important;
        transition: none !important;
    }
}

/* ---------------------------------------------------------------- details the CMS's editor would lose
   TinyMCE drops <svg> and empty elements, so the icons, dots, shading and the bookings light are drawn here from
   classes on the elements around them, looking just as the original markup did. */

/* mortar lines are <hr>s (an empty <div> gets a space put in it, which would make it taller) */
hr.mortar-line-h {
    border: 0;
}

/* the photos' soft shading towards the middle of the hero */
.barn-shade-r::after,
.barn-shade-l::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right, transparent, hsl(var(--background) / .2));
}

.barn-shade-l::after {
    background: linear-gradient(to left, transparent, hsl(var(--background) / .2));
}

/* "Now accepting bookings": a green light, pulsing */
.barn-ping {
    position: relative;
}

.barn-ping::before,
.barn-ping::after {
    content: "";
    flex-shrink: 0;
    width: .625rem;
    height: .625rem;
    border-radius: 9999px;
    background-color: hsl(var(--secondary));
}

.barn-ping::after {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -.3125rem;
    opacity: .75;
    animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
}

/* the dots beside the Enquire section's points */
.barn-dot::before {
    content: "";
    flex-shrink: 0;
    width: .375rem;
    height: .375rem;
    margin-top: .5rem;
    border-radius: 9999px;
    background-color: hsl(var(--primary));
}

/* icons (Lucide's, at 1.5 stroke): above a feature's label (barn-icon), or beside a line (barn-icon--inline) */
.barn-icon::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-bottom: .75rem;
    background-color: hsl(var(--primary));
    -webkit-mask: var(--icon) no-repeat center / contain;
    mask: var(--icon) no-repeat center / contain;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.group:hover .barn-icon::before {
    transform: translateY(-2px);
}

.barn-icon--inline::before {
    width: 18px;
    height: 18px;
    margin-bottom: 0;
    background-color: hsl(var(--secondary));
}

.barn-icon--users {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

.barn-icon--flame {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E");
}

.barn-icon--wifi {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h.01'/%3E%3Cpath d='M2 8.82a15 15 0 0 1 20 0'/%3E%3Cpath d='M5 12.859a10 10 0 0 1 14 0'/%3E%3Cpath d='M8.5 16.429a5 5 0 0 1 7 0'/%3E%3C/svg%3E");
}

.barn-icon--volume {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z'/%3E%3Cpath d='M16 9a5 5 0 0 1 0 6'/%3E%3Cpath d='M19.364 18.364a9 9 0 0 0 0-12.728'/%3E%3C/svg%3E");
}

.barn-icon--coffee {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v2'/%3E%3Cpath d='M14 2v2'/%3E%3Cpath d='M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1'/%3E%3Cpath d='M6 2v2'/%3E%3C/svg%3E");
}

.barn-icon--calendar {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
    .barn-ping::after {
        animation: none;
    }
}

/* ---------------------------------------------------------------- the enquiry form */

.enquiry-error {
    color: hsl(var(--primary));
}

/* ---------------------------------------------------------------- text from the CMS editor (pages without sections, articles) */

.content {
    font-family: var(--font-body);
    color: hsl(var(--muted-foreground));
    line-height: 1.7;
}

.content > * + * {
    margin-top: 1.25em;
}

.content h2,
.content h3 {
    font-family: var(--font-heading);
    color: hsl(var(--foreground));
    line-height: 1.25;
    margin-top: 2em;
}

.content h2 {
    font-size: 1.75rem;
}

.content h3 {
    font-size: 1.35rem;
}

.content a {
    color: hsl(var(--primary));
    text-decoration: underline;
    text-underline-offset: 3px;
}

.content ul,
.content ol {
    padding-left: 1.25em;
}

.content ul {
    list-style: disc;
}

.content ol {
    list-style: decimal;
}

.content img {
    max-width: 100%;
    height: auto;
}