/*
Theme Name: Secret Garden Parties Holding Page
Theme URI: https://secretgardenparties.co.uk/
Author: Blue Chilli Group
Author URI: https://wearebluechilli.co.uk/
Description: A bold, responsive holding page for Secret Garden Parties with social metadata, sharing artwork and editable contact details.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: secret-garden-parties
*/

:root {
  --ink: #0a0838;
  --blue: #1715a8;
  --coral: #ff5c52;
  --pink: #ff4db1;
  --yellow: #ffd84d;
  --white: #fff;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --display: "Archivo Black", Impact, sans-serif;
  --body: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { margin: 0 !important; }
body { margin: 0; background: var(--ink); color: white; font-family: var(--body); font-size: 16px; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 30; top: 0; left: 1rem; transform: translateY(-120%); background: var(--yellow); color: var(--ink); padding: .7rem 1rem; font-weight: 700; }
.skip-link:focus { transform: translateY(0); }

.holding { position: relative; min-height: 100svh; padding-bottom: 8rem; overflow: hidden; isolation: isolate; }
.holding-image, .holding-wash { position: absolute; inset: 0; width: 100%; height: 100%; }
.holding-image { z-index: -4; object-fit: cover; object-position: center; transform: scale(1.04); animation: slow-push 16s ease-in-out infinite alternate; }
.holding-wash { z-index: -3; background: radial-gradient(circle at 76% 25%, rgba(255,216,77,.25), transparent 19%), linear-gradient(100deg, rgba(8,5,55,.97) 0%, rgba(15,8,86,.84) 43%, rgba(16,8,85,.25) 82%), linear-gradient(0deg, rgba(8,5,55,.78), transparent 52%); }
.holding::after { position: absolute; z-index: -2; inset: 0; background: repeating-linear-gradient(112deg, transparent 0 6rem, rgba(255,255,255,.055) 6rem 6.08rem); content: ""; }

.colour-orbit { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.colour-orbit--yellow { width: clamp(14rem, 25vw, 25rem); height: clamp(14rem, 25vw, 25rem); right: -7rem; top: 13%; border: clamp(.7rem, 1.4vw, 1.4rem) solid var(--yellow); box-shadow: inset 0 0 0 .7rem var(--pink), .9rem .9rem 0 rgba(23,21,168,.8); animation: orbit-drift 8s ease-in-out infinite alternate; }
.colour-orbit--pink { width: 7rem; height: 7rem; left: 45%; top: -3.5rem; background: var(--pink); box-shadow: .7rem .7rem 0 var(--yellow); animation: bob 6s ease-in-out infinite alternate; }

.holding-header { position: relative; z-index: 3; padding: 1.5rem var(--gutter); display: flex; align-items: flex-start; justify-content: space-between; }
.wordmark { width: 10.5rem; display: flex; flex-direction: column; align-items: flex-start; color: white; font-size: .76rem; font-weight: 700; letter-spacing: .28em; line-height: .82; text-decoration: none; text-transform: uppercase; }
.wordmark strong { font-size: 2.05rem; letter-spacing: .025em; line-height: .9; }
.wordmark-tail { align-self: flex-end; margin-top: .22rem; }
.wordmark::after { width: 100%; height: 3px; margin-top: .5rem; border-radius: 99px; background: var(--yellow); content: ""; }

.coming-badge { width: 10.5rem; height: 10.5rem; display: grid; place-content: center; transform: rotate(8deg); border-radius: 50%; background: var(--coral); color: var(--ink); text-align: center; box-shadow: .7rem .7rem 0 var(--yellow); animation: badge-pulse 4s ease-in-out infinite; }
.coming-badge span { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.coming-badge strong { max-width: 7ch; margin: .35rem auto 0; font-family: var(--display); font-size: 1.7rem; line-height: .9; text-transform: uppercase; }

.holding-copy { position: relative; z-index: 2; width: min(78rem, calc(100% - 2 * var(--gutter))); margin: clamp(4rem, 8vh, 7rem) var(--gutter) 0; }
.eyebrow { margin: 0 0 1rem; color: var(--yellow); font-size: .8rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
h1 { margin: 0; font-family: var(--display); font-size: clamp(4.2rem, 9.6vw, 10rem); font-weight: 900; letter-spacing: -.055em; line-height: .82; text-transform: uppercase; }
h1 span { display: block; }
h1 .outline { color: transparent; -webkit-text-stroke: 2px white; }
.intro { max-width: 41rem; margin: 1.5rem 0 0; font-size: clamp(1.1rem, 1.8vw, 1.45rem); font-weight: 500; line-height: 1.35; }
.holding-actions { margin-top: 1.8rem; display: flex; align-items: center; gap: 1.5rem; }
.primary-action { min-height: 3.55rem; padding: .95rem 1.35rem; display: inline-flex; align-items: center; gap: 2.4rem; border-radius: 99px; background: var(--yellow); color: var(--ink); font-weight: 800; text-decoration: none; box-shadow: .35rem .35rem 0 var(--pink); transition: transform .2s, box-shadow .2s; }
.primary-action:hover, .primary-action:focus-visible { transform: translate(-.15rem, -.15rem); box-shadow: .55rem .55rem 0 var(--pink); }
.phone-link { font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: .3rem; }

.holding-footer { position: absolute; z-index: 3; right: var(--gutter); bottom: 4.8rem; left: var(--gutter); display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.socials { display: flex; align-items: center; gap: .7rem; }
.socials > span { margin-right: .3rem; font-size: .73rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.socials a { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; transition: transform .2s, background .2s, color .2s; }
.socials a:hover, .socials a:focus-visible { transform: translateY(-.2rem); background: var(--yellow); color: var(--ink); }
.socials svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.group-link { font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; }
.group-link span { color: var(--yellow); }

.ticker { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; overflow: hidden; border-top: 1px solid rgba(10,8,56,.2); background: var(--yellow); color: var(--ink); }
.ticker > div { width: max-content; padding: .82rem 0; display: flex; gap: 1.8rem; align-items: center; animation: ticker 20s linear infinite; font-family: var(--display); font-size: .95rem; text-transform: uppercase; }
.ticker i { color: var(--pink); font-style: normal; }

@keyframes slow-push { to { transform: scale(1.1); } }
@keyframes orbit-drift { to { transform: translate(-1.5rem, 1rem) rotate(8deg); } }
@keyframes bob { to { transform: translateY(1.25rem) rotate(10deg); } }
@keyframes badge-pulse { 50% { transform: rotate(5deg) scale(1.04); } }
@keyframes ticker { to { transform: translateX(-50%); } }

@media (max-width: 782px) {
  body.admin-bar .holding { min-height: calc(100svh - 46px); }
  .holding { min-height: 50rem; }
  .holding-header { padding-top: 1.2rem; }
  .wordmark { width: 8.5rem; font-size: .64rem; }
  .wordmark strong { font-size: 1.65rem; }
  .coming-badge { width: 7.4rem; height: 7.4rem; box-shadow: .45rem .45rem 0 var(--yellow); }
  .coming-badge strong { font-size: 1.2rem; }
  .holding-copy { margin-top: clamp(3.5rem, 8vh, 5rem); }
  h1 { font-size: clamp(3.55rem, 16vw, 6.5rem); line-height: .84; }
  .intro { max-width: 29rem; font-size: 1.05rem; }
  .colour-orbit--yellow { right: -9rem; top: 23%; opacity: .72; }
  .holding-footer { bottom: 4.35rem; align-items: flex-start; flex-direction: column; gap: .85rem; }
  .socials > span { font-size: .65rem; }
}

@media (min-width: 783px) {
  body.admin-bar .holding { min-height: calc(100svh - 32px); }
}

@media (max-width: 480px) {
  .holding { min-height: 54rem; }
  .holding-copy { margin-top: 4rem; }
  .holding-actions { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .primary-action { width: 100%; justify-content: space-between; }
  .holding-footer { bottom: 4.2rem; }
  .ticker > div { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}