/* ==========================================================================
   Nottingham Dance Centre — dance-jobs.css
   Dance Jobs page (dance-jobs-nottingham.html).
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    background: #ededed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 90vh;
    padding: var(--sp-9) 0;
    overflow: hidden;
}

.hero__kanji {
    position: absolute;
    right: clamp(1rem, 4vw, 5rem);
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-family: 'Yuji Boku', serif;
    font-size: clamp(8rem, 20vw, 18rem);
    color: var(--black);
    opacity: 0.06;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.hero h1 {
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    letter-spacing: -0.04em;
    line-height: 1.0;
}

.hero__sub {
    position: relative;
    z-index: 1;
    font-family: 'Caveat', 'Comic Sans MS', cursive;
    font-weight: 600;
    font-size: clamp(1.45rem, 1rem + 1.5vw, 2.05rem);
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: #18233f;                 /* black-blue ballpoint ink */
    max-width: 30em;
    margin: var(--sp-6) auto var(--sp-7);
    padding: 2.4rem 2.6rem 2.6rem;
    text-align: center;
    transform: rotate(-0.7deg);
    border-radius: 3px;
    /* cream music-manuscript sheet with faint 5-line staves */
    background-color: #fcf9ee;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(34, 48, 104, 0.20) 0 1px,
        transparent 1px 9px,
        rgba(34, 48, 104, 0.20) 9px 10px,
        transparent 10px 18px,
        rgba(34, 48, 104, 0.20) 18px 19px,
        transparent 19px 27px,
        rgba(34, 48, 104, 0.20) 27px 28px,
        transparent 28px 36px,
        rgba(34, 48, 104, 0.20) 36px 37px,
        transparent 37px 64px
    );
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14), 0 1px 0 rgba(0, 0, 0, 0.05);
}

/* hand-drawn music notes scribbled in around the sheet */
.hero__sub .ms-note {
    position: absolute;
    color: #18233f;
    opacity: 0.8;
    pointer-events: none;
    line-height: 0;
}

.hero__sub .ms-note svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* treble clef at the start, sitting in the left margin like the head of a stave */
.ms-note--clef { top: 12px; left: 8px; width: 30px; height: 84px; opacity: 0.78; transform: rotate(-3deg); }
/* full-width final line here, so notes straddle the bottom edge in the corners, clear of text */
.ms-note--in1 { bottom: -16px; right: 40px; width: 26px; height: 40px; opacity: 0.7; transform: rotate(9deg); }
.ms-note--in2 { bottom: -18px; left: 56px; width: 40px; height: 40px; opacity: 0.7; transform: rotate(-10deg); }
/* one faint note scribbled into the upper margin for balance */
.ms-note--c   { top: 22px; right: 46px; width: 22px; height: 34px; opacity: 0.5; transform: rotate(12deg); }

@keyframes postit-drop {
    0%   { opacity: 0; transform: translateY(-50vh) rotate(-6deg); }
    55%  { opacity: 1; transform: translateY(8px) rotate(2deg); }
    75%  { transform: translateY(-3px) rotate(-1.5deg); }
    100% { opacity: 1; transform: translateY(0) rotate(-1.2deg); }
}

.hero__actions {
    position: absolute;
    bottom: var(--sp-7);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--sp-5);
    flex-wrap: wrap;
    justify-content: center;
}

.hero__note {
    position: relative;
    display: inline-block;
    background: var(--mustard-bright);
    color: var(--black);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-sm);
    padding: var(--sp-4) var(--sp-5);
    box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition), box-shadow var(--transition);
    animation: postit-drop 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hero__note--1 { transform: rotate(-2deg); animation-delay: 0.7s; }
.hero__note--2 { transform: rotate(1.5deg); animation-delay: 0.9s; }

.hero__note:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: 3px 6px 16px rgba(0, 0, 0, 0.15);
}

.hero__note-tape {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    width: 50px;
    height: 18px;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 1px;
    pointer-events: none;
}

.hero__note--1 .hero__note-tape { transform: translateX(-50%) rotate(3deg); }
.hero__note--2 .hero__note-tape { transform: translateX(-50%) rotate(-2deg); left: 45%; }

/* --------------------------------------------------------------------------
   BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb {
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: var(--sp-3) 0;
}

.breadcrumb__list {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--text-faint);
}

.breadcrumb__list li + li::before {
    content: "/";
    margin-right: var(--sp-2);
    color: var(--text-faint);
}

.breadcrumb__list a { color: var(--text-muted); transition: color var(--transition); }
.breadcrumb__list a:hover { color: var(--black); }
.breadcrumb__list [aria-current="page"] { color: var(--black); font-weight: 600; }

/* --------------------------------------------------------------------------
   INTRO — three-card grid
   -------------------------------------------------------------------------- */
.intro {
    background: var(--surface);
}

.intro__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
}

.intro__card {
    padding: var(--sp-6);
    border: 1px solid var(--line);
    background: var(--ink);
}

.intro__card i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--mustard-bright);
    color: var(--black);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-4);
}

.intro__card h3 { margin-bottom: var(--sp-3); }

.intro__card p {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.65;
}

/* --------------------------------------------------------------------------
   POSITIONS — post-it pinboard
   -------------------------------------------------------------------------- */
.positions__pinboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sp-6);
}

.position-postit {
    position: relative;
    background: var(--mustard-bright);
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition), box-shadow var(--transition);
}

.position-postit__tape {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    width: 50px;
    height: 18px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 1px;
    pointer-events: none;
    z-index: 2;
}

.position-postit:nth-child(3n+1) { transform: rotate(-1.5deg); }
.position-postit:nth-child(3n+2) { transform: rotate(1.2deg); }
.position-postit:nth-child(3n+3) { transform: rotate(-0.8deg); }

.position-postit:nth-child(3n+1) .position-postit__tape { transform: translateX(-50%) rotate(2deg); }
.position-postit:nth-child(3n+2) .position-postit__tape { transform: translateX(-50%) rotate(-3deg); left: 45%; }
.position-postit:nth-child(3n+3) .position-postit__tape { transform: translateX(-50%) rotate(1.5deg); left: 55%; }

.position-postit:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: 3px 6px 14px rgba(0,0,0,0.15);
}

.position-postit__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--white);
    color: var(--black);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-4);
}

.position-postit h3 {
    font-size: var(--fs-base);
    color: var(--black);
    margin-bottom: var(--sp-2);
}

.position-postit__pay {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--white);
    background: var(--black);
    padding: var(--sp-1) var(--sp-3);
    margin-bottom: var(--sp-3);
}

.position-postit p {
    font-size: var(--fs-xs);
    color: rgba(27, 27, 27, 0.65);
    line-height: 1.55;
    margin-bottom: var(--sp-3);
}

.position-postit ul {
    font-size: var(--fs-xs);
    color: rgba(27,27,27,0.65);
    line-height: 1.7;
}

.position-postit ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--black);
    margin-right: var(--sp-2);
    font-size: 0.7em;
}

/* --------------------------------------------------------------------------
   OFFER & REQUIREMENTS — corkboard
   -------------------------------------------------------------------------- */
.details-board {
    background: var(--ink);
}

.cork {
    position: relative;
    background: #a0856b;
    background-image:
        radial-gradient(ellipse at 20% 30%, rgba(0,0,0,0.06) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 70%, rgba(255,255,255,0.05) 0%, transparent 50%);
    padding: var(--sp-8);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
    box-shadow: inset 0 2px 12px rgba(0,0,0,0.2);
    border: 8px solid #8b7256;
}

.cork__pin {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #e84040, #b91c1c);
    box-shadow: 0 2px 4px rgba(0,0,0,0.35), inset 0 1px 2px rgba(255,255,255,0.3);
    z-index: 2;
}

.cork__note {
    position: relative;
    background: var(--mustard-bright);
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    box-shadow: 2px 3px 10px rgba(0,0,0,0.2);
}

.cork__note--1 { transform: rotate(-1.5deg); }
.cork__note--2 { transform: rotate(1deg); }

.cork__note h3 {
    font-size: var(--fs-md);
    color: var(--black);
    margin-bottom: var(--sp-4);
}

.cork__note ul {
    font-size: var(--fs-sm);
    color: rgba(27,27,27,0.65);
    line-height: 1.8;
}

.cork__note ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--black);
    margin-right: var(--sp-2);
    font-size: 0.7em;
}

.cork__card {
    position: relative;
    grid-column: 1 / -1;
    background: var(--white);
    padding: var(--sp-6);
    box-shadow: 2px 3px 10px rgba(0,0,0,0.15);
    transform: rotate(0.3deg);
}

.cork__tape {
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 60px;
    height: 20px;
    background: rgba(255,255,255,0.45);
    border-radius: 1px;
    z-index: 2;
}

.cork__card h3 {
    font-size: var(--fs-lg);
    color: var(--black);
    margin-bottom: var(--sp-4);
}

.cork__card p {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.65;
}

/* --------------------------------------------------------------------------
   OPPORTUNITIES TABLE
   -------------------------------------------------------------------------- */
.positions {
    background: var(--ink);
}

.opportunities {
    background: var(--surface);
}

.opportunities__wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.opportunities__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.opportunities__table thead th {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--black);
    background: var(--mustard-bright);
    padding: var(--sp-4) var(--sp-5);
    text-align: left;
    white-space: nowrap;
}

.opportunities__table tbody td {
    padding: var(--sp-4) var(--sp-5);
    color: var(--text-muted);
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.opportunities__table tbody tr:hover td {
    background: var(--surface);
}

.opportunities__table tbody td:first-child {
    color: var(--black);
    font-weight: 600;
}

.opportunities__table tbody td:last-child {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--black);
    white-space: nowrap;
}

/* --- Opportunities post-it --- */
.opportunities__postit {
    position: relative;
    display: inline-block;
    background: var(--mustard-bright);
    padding: var(--sp-5) var(--sp-6);
    margin-top: var(--sp-6);
    box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.1);
    transform: rotate(-1.5deg);
}

.opportunities__postit-tape {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(2deg);
    width: 50px;
    height: 18px;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 1px;
    pointer-events: none;
}

.opportunities__postit-label {
    font-family: 'Caveat', cursive;
    font-size: 1.15rem;
    color: #1a3c7a;
    margin-bottom: var(--sp-1);
}

.opportunities__postit-email {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 700;
    color: #1a3c7a;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: color var(--transition);
}

.opportunities__postit-email:hover {
    color: var(--black);
}

/* --------------------------------------------------------------------------
   APPLICATION FORM
   -------------------------------------------------------------------------- */
.apply {
    background: var(--surface);
}

.apply__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
    align-items: start;
}

.apply__info h2 {
    margin-bottom: var(--sp-4);
}

.apply__info > p {
    color: var(--text-muted);
    font-size: var(--fs-md);
    line-height: 1.7;
    margin-bottom: var(--sp-6);
}

.apply__perks {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.apply__perk {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
}

.apply__perk i {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--mustard-bright);
    color: var(--black);
    font-size: var(--fs-xs);
}

.apply__perk span {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.6;
}

.apply__perk strong { color: var(--black); }

.apply__form-card {
    position: relative;
    background: var(--white);
    padding: var(--sp-7) var(--sp-6);
    box-shadow: 3px 5px 18px rgba(0,0,0,0.08);
}

.apply__form-card h3 {
    font-size: var(--fs-xl);
    color: var(--black);
    margin-bottom: var(--sp-2);
}

.apply__form-sub {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-6);
}

.apply__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}

.apply__field {
    margin-bottom: var(--sp-4);
}

.apply__field label {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--black);
    margin-bottom: var(--sp-2);
}

.apply__field .req { color: var(--red); }

.apply__field input,
.apply__field select,
.apply__field textarea {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--text);
    background: var(--ink);
    border: 1px solid var(--line);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.apply__field input:focus,
.apply__field select:focus,
.apply__field textarea:focus {
    border-color: var(--mustard);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);   /* orange focus glow */
}

.apply__field input::placeholder,
.apply__field textarea::placeholder {
    color: var(--text-faint);
}

.apply__field textarea { resize: vertical; min-height: 100px; }

.apply__field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

.apply__submit {
    width: 100%;
    padding: var(--sp-4) var(--sp-6);
    background: var(--black);
    color: var(--white);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 2px solid var(--black);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    transition: background var(--transition), color var(--transition);
}

.apply__submit:hover {
    background: transparent;
    color: var(--black);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq {
    background: var(--ink);
}

.faq__list { max-width: 780px; }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-5) 0;
    font-weight: 700;
    font-size: var(--fs-md);
    color: var(--black);
    transition: color var(--transition);
}

.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { color: var(--red); font-size: var(--fs-sm); transition: transform var(--transition); flex-shrink: 0; }
.faq__item[open] summary { color: var(--text-muted); }
.faq__item[open] summary i { transform: rotate(45deg); }
.faq__item p { padding: 0 0 var(--sp-5); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .apply__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero__kanji { display: none; }

    .intro__grid {
        grid-template-columns: 1fr;
    }

    .opportunities__table {
        font-size: var(--fs-xs);
        min-width: 600px;
    }

    .opportunities__table thead th,
    .opportunities__table tbody td {
        padding: var(--sp-3) var(--sp-4);
    }

    .cork {
        grid-template-columns: 1fr;
        padding: var(--sp-6);
    }

    .apply__form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero__note {
        width: 100%;
        text-align: center;
    }

    .positions__pinboard {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
        max-width: 360px;
        margin: 0 auto;
    }

    .cork {
        padding: var(--sp-5);
        border-width: 5px;
    }

    .apply__form-card {
        padding: var(--sp-5) var(--sp-4);
    }
}