/* ==========================================================================
   Ringwood & District Anglers Association
   Theme styles derived from Ringwood Fishing Brand Guidelines v1.0
   Author: b4b Marketing
   --------------------------------------------------------------------------
   Lifted verbatim from the inline <style> block of the b4b mock-ups
   (assets/login.html, assets/register.html, assets/day-tickets_2.html,
   assets/forgotten.html, assets/buyExtraOptions.html) — the block was
   identical in all of them. Project-specific additions live at the bottom of
   this file, under "Project additions".
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root{
  /* Brand palette (Brand Guidelines p.02) */
  --brand:#D3891A;
  --brand-dark:#A96A0F;
  --dark-green:#152515;
  --green:#597553;
  --accent:#E8C995;
  --heading:#1B1B1B;
  --text:#444444;
  --border:#E2DDD1;
  --black:#0A0A0A;

  /* Surfaces derived from the palette */
  --paper:#FFFFFF;
  --paper-warm:#FBF9F4;
  --paper-dim:#F5F1E8;

  /* Type */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* Structure — squared, generous, vertical (Brand Guidelines p.06) */
  --radius:2px;
  --shell:1240px;
  --shell-narrow:860px;
  --gutter:clamp(20px,5vw,60px);
  --section:clamp(64px,9vw,128px);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  font-weight:300;
  line-height:1.7;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

/* --- Type hierarchy (Brand Guidelines p.04) ---------------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--display);
  color:var(--heading);
  margin:0;
  font-optical-sizing:auto;
}

.h1,h1{
  font-size:clamp(40px,7.2vw,88px);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-1px;
  word-spacing:-5px;
}
.h2,h2{
  font-size:clamp(30px,4.6vw,52px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.01em;
}
.h3,h3{
  font-size:clamp(26px,3.6vw,44px);
  font-weight:400;
  line-height:1.0;
}
.h4,h4{
  font-size:24px;
  font-weight:400;
  line-height:1.25;
}
.h5,h5{
  font-size:19px;
  font-weight:400;
  line-height:1.3;
}

.h4.word-spacing-zero{
    word-spacing:0px;
}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--brand-dark)}

strong{font-weight:500;color:var(--heading)}

/* Focus — visible on every surface */
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--accent)}

/* --- Layout ------------------------------------------------------------ */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.shell--narrow{max-width:var(--shell-narrow)}

.section{padding-block:var(--section)}
.section--tight{padding-block:clamp(48px,6vw,80px)}
.section--warm{background:var(--paper-warm)}
.section--dim{background:var(--paper-dim)}
.section--dark{background:var(--dark-green);color:rgba(255,255,255,.78)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}

.rule{height:1px;background:var(--border);border:0;margin:0}

.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.65;font-weight:300;max-width:62ch}
.measure{max-width:70ch}

/* --- Eyebrow label ----------------------------------------------------- */
/* The leading dash mirrors the section labels on the new build. To remove it
   globally, delete the ::before rule below. */
.eyebrow{
  display:block;
  font-family:var(--body);
  font-size:12px;
  font-weight:500;
  line-height:1;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brand);
  margin:0 0 20px;
}
.eyebrow::before{content:"— ";}
.section--dark .eyebrow,.on-dark .eyebrow{color:var(--accent)}

/* --- Buttons (Brand Guidelines p.05) ----------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-size:14px;font-weight:500;line-height:1;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:17px 30px;border:1px solid transparent;border-radius:var(--radius);
  cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.btn--primary{background:var(--brand);color:var(--black)}
.btn--primary:hover{background:var(--accent);color:var(--black)}
.btn--secondary{background:transparent;border-color:#fff;color:#fff}
.btn--secondary:hover{background:#fff;color:var(--black)}
.btn--outline{background:transparent;border-color:var(--heading);color:var(--heading)}
.btn--outline:hover{background:var(--heading);color:#fff}
.btn--block{width:100%}
.btn--lg{padding:20px 34px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

.textlink{
  font-family:var(--body);font-size:14px;font-weight:500;letter-spacing:.06em;
  color:var(--brand);text-decoration:none;
}
.textlink:hover{text-decoration:underline;text-underline-offset:4px}
.textlink .arw{display:inline-block;transition:transform .18s ease}
.textlink:hover .arw{transform:translateX(4px)}

/* --- Masthead ---------------------------------------------------------- */
.masthead{
  position:sticky;top:0;z-index:60;
  background:var(--paper);border-bottom:1px solid var(--border);
}
.masthead__inner{
  max-width:var(--shell);margin-inline:auto;padding:0 var(--gutter);
  min-height:86px;display:flex;align-items:center;gap:32px;
}

/* Typographic wordmark. Kept for the footer and as a fallback where no logo
   asset is available. */
.wordmark{text-decoration:none;display:block;flex:0 0 auto}
.wordmark__name{
  display:block;font-family:var(--display);font-size:25px;font-weight:500;
  line-height:1;letter-spacing:-.02em;color:var(--heading);
}
.wordmark__sub{
  display:block;font-family:var(--body);font-size:8.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--brand);margin-top:6px;
}

/* Slim three-link nav */
.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav__link{
  font-size:13px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  color:var(--heading);text-decoration:none;padding:12px 0;display:inline-block;position:relative;
}
.nav__link:hover{color:var(--brand)}
.nav__link[aria-current="page"]{color:var(--brand)}
.nav__link[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--brand);
}
.nav__link--back{color:var(--green)}
.nav__link--back:hover{color:var(--brand)}
.nav__arrow{display:inline-block;margin-right:6px;transition:transform .18s ease}
.nav__link--back:hover .nav__arrow{transform:translateX(-4px)}

@media (max-width:760px){
  .masthead__inner{
    flex-direction:column;align-items:flex-start;gap:0;
    min-height:0;padding-block:16px 0;
  }
  .nav{margin-left:0;width:100%;border-top:1px solid var(--border);margin-top:16px}
  .nav__list{gap:22px;flex-wrap:wrap}
  .nav__link{font-size:11.5px;letter-spacing:.09em;padding:13px 0}
}

/* --- Hero -------------------------------------------------------------- */
.hero{
  background:var(--dark-green);color:rgba(255,255,255,.76);
  position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--brand) 0 34%,var(--green) 34% 100%);
}
.hero__inner{
  max-width:var(--shell);margin-inline:auto;padding:clamp(56px,8vw,110px) var(--gutter) clamp(52px,7vw,96px);
}
.hero h1{color:#fff;max-width:20ch}
.hero .lede{margin-top:26px;color:rgba(255,255,255,.74)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero--compact .hero__inner{padding-block:clamp(48px,6vw,84px)}

/* Spec strip beneath the hero */
.specstrip{border-top:1px solid rgba(255,255,255,.12);margin-top:clamp(40px,5vw,64px);padding-top:30px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.specstrip__k{
  display:block;font-family:var(--display);font-size:32px;font-weight:400;
  line-height:1;color:#fff;letter-spacing:-.01em;
}
.specstrip__v{
  display:block;margin-top:9px;font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
}
@media (max-width:760px){.specstrip{grid-template-columns:1fr 1fr;gap:24px}}

/* --- Section heading block --------------------------------------------- */
.shead{max-width:64ch;margin-bottom:clamp(36px,4.5vw,60px)}
.shead .lede{margin-top:20px}
.shead--split{
  max-width:none;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:end;
}
@media (max-width:900px){.shead--split{grid-template-columns:1fr;align-items:start}}

/* --- Notice panel ------------------------------------------------------ */
.notice{
  background:var(--paper-warm);border:1px solid var(--border);border-left:3px solid var(--brand);
  border-radius:var(--radius);padding:clamp(24px,3.4vw,38px);
}
.notice h2,.notice h3,.notice h4{margin-bottom:14px}
.notice ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.notice li{position:relative;padding-left:26px;font-size:15px;line-height:1.6}
.notice li::before{
  content:"";position:absolute;left:0;top:.62em;width:11px;height:1px;background:var(--brand);
}
.notice--flag{border-left-color:var(--green);background:#fff}

/* --- Ticket stubs (signature device) ----------------------------------- */
.tickets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:820px){.tickets{grid-template-columns:1fr}}

.stub{
  display:grid;grid-template-columns:minmax(0,1fr) 138px;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--paper);
  overflow:hidden;
}
.stub__body{padding:30px 30px 28px}
.stub__kind{
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green);display:block;margin-bottom:12px;
}
.stub__body h3{margin-bottom:14px}
.stub__meta{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.stub__meta li{font-size:14px;line-height:1.5;color:var(--text)}
.stub__meta li strong{color:var(--heading)}
.stub__price{
  position:relative;background:var(--paper-dim);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:24px 12px;text-align:center;
}
/* perforation */
.stub__price::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  border-left:1px dashed #C9C0AC;
}
.stub__amount{
  font-family:var(--display);font-size:44px;font-weight:400;line-height:1;
  color:var(--heading);letter-spacing:-.02em;
}
.stub__unit{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
.stub--feature{border-color:var(--brand)}
.stub--feature .stub__price{background:var(--brand)}
.stub--feature .stub__amount{color:var(--black)}
.stub--feature .stub__unit{color:rgba(10,10,10,.62)}
.stub--feature .stub__price::before{border-left-color:rgba(10,10,10,.28)}
@media (max-width:420px){
  .stub{grid-template-columns:1fr}
  .stub__price{padding:20px;flex-direction:row;gap:12px;align-items:baseline}
  .stub__price::before{left:0;right:0;top:0;bottom:auto;width:auto;height:0;border-left:0;border-top:1px dashed #C9C0AC}
}

/* --- Beats (numbered because the beats run in order downstream) --------- */
.beats{display:grid;gap:0;border-top:1px solid var(--border)}
.beat{
  display:grid;grid-template-columns:96px minmax(0,1fr);
  gap:clamp(20px,4vw,54px);padding-block:clamp(34px,4.4vw,54px);
  border-bottom:1px solid var(--border);
}
.beat__no{
  font-family:var(--display);font-size:40px;font-weight:300;line-height:1;
  color:var(--brand);letter-spacing:-.02em;
}
.beat h3{margin-bottom:8px}
.beat__lead{font-size:15px;color:var(--green);font-weight:400;margin-bottom:18px}
.beat__body{max-width:68ch}
.beat__body p{font-size:15.5px}
@media (max-width:640px){
  .beat{grid-template-columns:1fr;gap:14px}
  .beat__no{font-size:30px}
}

/* --- Species tags ------------------------------------------------------ */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding:0;list-style:none}
.tags li{
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);border:1px solid var(--border);border-radius:var(--radius);
  padding:7px 12px;background:var(--paper-warm);
}

/* --- Generic card grid ------------------------------------------------- */
.cards{display:grid;gap:22px}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.cards--3{grid-template-columns:1fr}.cards--2{grid-template-columns:1fr}}

.card{
  background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(26px,3vw,34px);
}
.card--warm{background:var(--paper-warm)}
.card h3,.card h4,.card h5{margin-bottom:12px}
.card p{font-size:15px}
.card__no{
  font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand);display:block;margin-bottom:14px;
}

/* --- Shop list --------------------------------------------------------- */
.shops{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.shops li{
  border-bottom:1px solid var(--border);padding:20px 0;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;
}
.shops__name{font-family:var(--display);font-size:20px;font-weight:400;color:var(--heading)}
.shops__note{font-size:14px;color:var(--text)}

/* WYSIWYG variant — the editor emits a bare <ul><li>, so the list itself carries
   no classes. The wrapper takes the rules the .shops__name span would have. */
.shops--cms{border-top:0}
.shops--cms ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.shops--cms li{font-family:var(--display);font-size:20px;font-weight:400;color:var(--heading)}
.shops--cms li a{text-decoration:none;color:var(--heading)}
.shops--cms li a:hover{color:var(--brand)}
.shops--cms li em{font-family:var(--body);font-size:14px;font-style:normal;color:var(--text)}

/* --- Forms ------------------------------------------------------------- */
.field{display:block;margin-bottom:20px}
.label{
  display:block;font-family:var(--body);font-size:11px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--heading);margin-bottom:9px;
}
.label .req{color:var(--brand)}
.label .opt,legend .opt{
  color:#8A8272;font-weight:400;letter-spacing:.1em;text-transform:none;
  font-size:10.5px;margin-left:4px;
}
.hint{display:block;font-size:13px;line-height:1.55;color:#6B6B6B;margin-top:8px}
.hint--flag{
  color:var(--heading);border-left:2px solid var(--brand);
  padding:2px 0 2px 12px;margin-top:12px;
}

.input,.select,.textarea{
  width:100%;font-family:var(--body);font-size:16px;font-weight:300;line-height:1.5;
  color:var(--heading);background:var(--paper);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;transition:border-color .16s ease,box-shadow .16s ease;
  -webkit-appearance:none;appearance:none;
}
.input::placeholder{color:#A7A093}
.input:hover,.select:hover,.textarea:hover{border-color:#CFC7B4}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(211,137,26,.16);
}
.textarea{min-height:130px;resize:vertical}
.select{
  padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23444' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:11px;
}

.row{display:grid;gap:20px}
.row--2{grid-template-columns:1fr 1fr}
.row--3{grid-template-columns:repeat(3,1fr)}
.row--dob{grid-template-columns:1fr 1.4fr 1fr}
@media (max-width:600px){.row--2,.row--3{grid-template-columns:1fr}}
@media (max-width:520px){.row--dob{gap:9px}.row--dob .select{padding-left:11px;padding-right:32px;background-position:right 11px center}}

fieldset{border:0;margin:0;padding:0}
legend{padding:0}

/* Checkbox / radio */
.check{
  display:grid;grid-template-columns:20px minmax(0,1fr);gap:14px;align-items:start;
  font-size:15px;line-height:1.6;cursor:pointer;
}
.check input{
  appearance:none;-webkit-appearance:none;margin:0;width:20px;height:20px;
  border:1px solid #C4BBA6;border-radius:var(--radius);background:#fff;
  cursor:pointer;position:relative;flex:0 0 auto;margin-top:3px;
}
.check input:checked{background-color:var(--brand);border-color:var(--brand);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.4 7.4l3 3 6.2-6.6' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:13px}
.check input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Selectable option row, used for permit additions */
.optionlist{display:grid;gap:12px}
.option{
  display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:16px;align-items:center;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--paper);
  padding:18px 20px;cursor:pointer;transition:border-color .16s ease,background-color .16s ease;
}
.option:hover{border-color:#CFC7B4;background:var(--paper-warm)}
.option:has(input:checked){border-color:var(--brand);background:#FFFBF4}
.option input{
  appearance:none;-webkit-appearance:none;margin:0;width:20px;height:20px;
  border:1px solid #C4BBA6;border-radius:var(--radius);background:#fff;cursor:pointer;position:relative;
}
.option input:checked{background-color:var(--brand);border-color:var(--brand);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.4 7.4l3 3 6.2-6.6' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:13px}
.option input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.option__name{font-size:15px;color:var(--heading);line-height:1.45}
.option__name small{display:block;font-size:13px;color:var(--text);margin-top:3px}
.option__price{
  font-family:var(--display);font-size:20px;font-weight:400;color:var(--heading);white-space:nowrap;
}

/* File upload */
.upload{
  border:1px dashed #C9C0AC;border-radius:var(--radius);background:var(--paper-warm);
  padding:26px 24px;text-align:center;position:relative;transition:border-color .16s ease,background-color .16s ease;
}
.upload:hover{border-color:var(--brand);background:#FFFBF4}
.upload input[type=file]{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
}
.upload input[type=file]:focus-visible + .upload__ui{outline:2px solid var(--brand);outline-offset:6px}
.upload__ui{pointer-events:none}
.upload svg{display:block;width:22px;height:22px;stroke:var(--green);fill:none;stroke-width:1.4;margin:0 auto 12px}
.upload__cta{display:block;font-size:15px;color:var(--heading)}
.upload__cta b{color:var(--brand);font-weight:500}
.upload__meta{display:block;font-size:12.5px;color:#6B6B6B;margin-top:6px}
.upload__file{
  display:none;margin-top:14px;font-size:13.5px;color:var(--green);font-weight:400;
  word-break:break-all;
}
.upload[data-filled="true"]{border-style:solid;border-color:var(--green);background:#F6F8F5}
.upload[data-filled="true"] .upload__file{display:block}

/* --- Form step scaffolding (register) ---------------------------------- */
.step{border-top:1px solid var(--border);padding-top:clamp(30px,3.6vw,44px);margin-top:clamp(38px,4.6vw,60px)}
.step:first-of-type{border-top:0;padding-top:0;margin-top:0}
.step__head{display:flex;align-items:baseline;gap:16px;margin-bottom:26px}
.step__no{
  font-family:var(--display);font-size:15px;font-weight:400;color:var(--brand);
  letter-spacing:.04em;flex:0 0 auto;
}
.step__title{margin:0}
.step__intro{font-size:15px;margin:-14px 0 26px;max-width:66ch}

/* --- Summary panel ---------------------------------------------------- */
.summary{
  border:1px solid var(--border);border-top:3px solid var(--brand);border-radius:var(--radius);
  background:var(--paper-warm);padding:28px 26px;
}
.summary h2{font-size:20px;margin-bottom:4px}
.summary__note{font-size:13px;color:#6B6B6B;margin-bottom:22px}
.summary__lines{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.summary__lines li{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  font-size:14.5px;line-height:1.5;padding-bottom:12px;border-bottom:1px solid var(--border);
}
.summary__lines li:last-child{border-bottom:0;padding-bottom:0}
.summary__lines .lbl{color:var(--text)}
.summary__lines .amt{color:var(--heading);font-weight:400;white-space:nowrap}
.summary__empty{font-size:14px;color:#6B6B6B;font-style:italic}
.summary__total{
  margin-top:22px;padding-top:20px;border-top:1px solid #D8D0BD;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.summary__total .lbl{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--heading)}
.summary__total .amt{font-family:var(--display);font-size:38px;font-weight:400;line-height:1;color:var(--heading);letter-spacing:-.02em}
.summary__foot{font-size:12.5px;color:#6B6B6B;margin-top:18px;line-height:1.55}

.sticky{position:sticky;top:110px}

/* --- Split layouts ---------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:clamp(30px,5vw,70px);align-items:start}
/* A sticky box can only travel inside its containing block. `align-items:start`
   shrink-wraps the sidebar column to its content, which leaves a sticky child
   zero room to move, so it never sticks. Stretch the column to the full row
   height whenever it wraps a sticky element. */
.split > aside:has(> .sticky){align-self:stretch}
@media (max-width:960px){
  .split{grid-template-columns:1fr}
  .sticky{position:static}
  .split > aside:has(> .sticky){align-self:start}
}

/* --- Auth page -------------------------------------------------------- */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:640px}
@media (max-width:900px){.auth{grid-template-columns:1fr;min-height:0}}

.auth__aside{
  background:var(--dark-green);color:rgba(255,255,255,.74);
  padding:clamp(44px,5.4vw,76px) clamp(28px,4.6vw,68px);
  display:flex;flex-direction:column;justify-content:center;position:relative;
}
.auth__aside::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--brand) 0 30%,var(--green) 30% 100%);
}
@media (max-width:900px){.auth__aside::after{left:0;right:0;top:auto;bottom:0;width:auto;height:3px;
  background:linear-gradient(90deg,var(--brand) 0 34%,var(--green) 34% 100%)}}
.auth__aside .h2{color:#fff;max-width:16ch;margin:0}
.auth__aside .lede{margin-top:20px;color:rgba(255,255,255,.7);font-size:17px}
.auth__perks{list-style:none;margin:38px 0 0;padding:32px 0 0;border-top:1px solid rgba(255,255,255,.14);display:grid;gap:14px}
.auth__perks li{position:relative;padding-left:26px;font-size:15px;color:rgba(255,255,255,.72)}
.auth__perks li::before{content:"";position:absolute;left:0;top:.66em;width:12px;height:1px;background:var(--accent)}

.auth__panel{
  background:var(--paper);padding:clamp(44px,5.4vw,76px) clamp(28px,4.6vw,64px);
  display:flex;flex-direction:column;justify-content:center;
}
.auth__form{width:100%;max-width:420px;margin-inline:auto}
.auth__title{
  font-family:var(--display);font-size:clamp(28px,3.6vw,34px);font-weight:400;
  line-height:1.1;letter-spacing:-.01em;color:var(--heading);margin:0 0 10px;
}
.auth__sub{font-size:15px;margin-bottom:32px}

.pw{position:relative}
.pw .input{padding-right:74px}
.pw__toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;padding:8px 10px;
  font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--green);
}
.pw__toggle:hover{color:var(--brand)}

.formrow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:4px 0 28px}
.formrow--end{justify-content:flex-end}
.formrow .check{font-size:14px}

.altline{
  margin-top:32px;padding-top:26px;border-top:1px solid var(--border);
  font-size:15px;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;
}
.altline span{color:var(--text)}
.quietline{margin-top:16px;font-size:13.5px;color:#6B6B6B}
.quietline a{color:var(--green)}

/* --- Success / error summary ------------------------------------------- */
.flash{
  border:1px solid #BFCFBA;border-left:3px solid var(--green);background:#F5F8F4;
  border-radius:var(--radius);padding:18px 20px;margin-bottom:26px;font-size:14.5px;color:#33502D;
}
.flash strong{color:#25401F}
.alert{
  border:1px solid #D9B7B7;border-left:3px solid #A63D3D;background:#FCF6F5;
  border-radius:var(--radius);padding:18px 20px;margin-bottom:26px;font-size:14.5px;color:#7A2E2E;
}
.alert strong{color:#7A2E2E}
.alert ul{margin:8px 0 0;padding-left:20px}
.is-hidden{display:none}

/* --- CTA band --------------------------------------------------------- */
.band{background:var(--green);color:rgba(255,255,255,.82)}
.band__inner{
  max-width:var(--shell);margin-inline:auto;padding:clamp(48px,6vw,84px) var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);align-items:center;
}
.band h2{color:#fff;max-width:24ch}
.band p{margin-top:14px;max-width:52ch;color:rgba(255,255,255,.8)}
.band__actions{display:flex;flex-wrap:wrap;gap:14px}
@media (max-width:820px){.band__inner{grid-template-columns:1fr}}

/* --- Sponsors --------------------------------------------------------- */
.sponsors{border-top:1px solid var(--border);background:var(--paper-warm)}
.sponsors__inner{max-width:var(--shell);margin-inline:auto;padding:44px var(--gutter)}
.sponsors__label{
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green);text-align:center;margin-bottom:26px;
}
.sponsors__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;align-items:center}
.sponsors__grid a{
  display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px solid var(--border);background:#fff;border-radius:var(--radius);
  min-height:74px;padding:14px 18px;text-decoration:none;
  font-family:var(--display);font-size:16px;font-weight:400;color:var(--heading);
}
.sponsors__grid a:hover{border-color:var(--brand);color:var(--brand)}
@media (max-width:720px){.sponsors__grid{grid-template-columns:1fr 1fr}}

/* --- Footer ----------------------------------------------------------- */
.foot{background:var(--dark-green);color:rgba(255,255,255,.62);padding-top:clamp(48px,6vw,76px)}
.foot__inner{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}

.foot__slim{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,5vw,64px);align-items:start;
  padding-bottom:clamp(38px,4.6vw,58px);
}
@media (max-width:820px){.foot__slim{grid-template-columns:1fr}}

.foot .wordmark__name{color:#fff}
.foot .wordmark__sub{color:var(--accent)}
.foot__blurb{font-size:14.5px;line-height:1.65;margin-top:22px;max-width:44ch;color:rgba(255,255,255,.6)}

.foot__links{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.foot__links a{
  font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.66);text-decoration:none;
}
.foot__links a:hover{color:var(--brand)}
@media (max-width:820px){.foot__links{gap:12px 24px}}

.foot__bottom{
  border-top:1px solid rgba(255,255,255,.12);padding:24px 0 32px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 26px;
  font-size:13px;color:rgba(255,255,255,.45);
}
.foot__bottom a{color:rgba(255,255,255,.55);text-decoration:none}
.foot__bottom a:hover{color:var(--brand)}
.foot__legal{display:flex;flex-wrap:wrap;gap:20px}

/* --- Utilities -------------------------------------------------------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--brand);color:var(--black);
  padding:14px 22px;font-size:14px;font-weight:500;text-decoration:none;
}
.skip:focus{left:12px;top:12px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mt-s{margin-top:20px}
.mt-m{margin-top:32px}
.mt-l{margin-top:clamp(36px,4.5vw,56px)}

/* ==========================================================================
   Member area
   ========================================================================== */

/* --- Page band --------------------------------------------------------- */
.memberbar{background:var(--dark-green);color:rgba(255,255,255,.74);position:relative;overflow:hidden}
.memberbar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--brand) 0 34%,var(--green) 34% 100%);
}
.memberbar__inner{
  max-width:var(--shell);margin-inline:auto;
  padding:clamp(40px,5vw,66px) var(--gutter) clamp(38px,4.6vw,58px);
}
.memberbar h1{
  color:#fff;font-size:clamp(30px,4.4vw,50px);font-weight:300;
  line-height:1.06;letter-spacing:-.02em;word-spacing:normal;max-width:24ch;
}
.memberbar .lede{margin-top:18px;color:rgba(255,255,255,.7);font-size:17px}

/* --- Two column layout ------------------------------------------------- */
.mlayout{
  display:grid;grid-template-columns:300px minmax(0,1fr);
  gap:clamp(26px,4vw,56px);align-items:start;
}
@media (max-width:980px){.mlayout{grid-template-columns:1fr}}

.msidebar{position:sticky;top:110px;display:grid;gap:20px}
@media (max-width:980px){.msidebar{position:static}}

/* --- Membership card --------------------------------------------------- */
.mcard{border:1px solid var(--border);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.mcard__photo{
  aspect-ratio:4 / 3;background:var(--paper-dim) center / cover no-repeat;
  border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center;
}
.mcard__photo svg{width:34px;height:34px;stroke:#B5AC97;fill:none;stroke-width:1.3}
.mcard__body{padding:20px}
.mcard__name{
  font-family:var(--display);font-size:21px;font-weight:400;line-height:1.15;
  color:var(--heading);margin:0 0 4px;letter-spacing:-.01em;
}
.mcard__role{font-size:12.5px;color:var(--green);margin:0 0 18px}
.mcard__meta{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.mcard__meta li{display:grid;gap:3px}
.mcard__meta .k{
  font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--green);
}
.mcard__meta .v{font-size:14.5px;color:var(--heading)}
.mcard__foot{border-top:1px solid var(--border);padding:16px 20px}

.badge{
  display:inline-block;font-family:var(--body);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border-radius:var(--radius);
  background:var(--accent);color:var(--black);
}
.badge--ok{background:#E3EDE0;color:#33502D}
.badge--muted{background:var(--paper-dim);color:var(--green);border:1px solid var(--border)}

/* --- Member menu ------------------------------------------------------- */
.mmenu{border:1px solid var(--border);border-radius:var(--radius);background:var(--paper)}
.mmenu__title{
  font-family:var(--body);font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green);padding:18px 20px 14px;margin:0;
}
.mmenu ul{list-style:none;margin:0;padding:0}
.mmenu li{border-top:1px solid var(--border)}
.mmenu a{
  display:grid;grid-template-columns:18px minmax(0,1fr);gap:13px;align-items:center;
  padding:15px 20px;font-size:14.5px;color:var(--text);text-decoration:none;
  transition:background-color .16s ease,color .16s ease;
}
.mmenu a:hover{background:var(--paper-warm);color:var(--heading)}
.mmenu a[aria-current="page"]{
  background:#FFFBF4;color:var(--heading);box-shadow:inset 3px 0 0 var(--brand);
}
.mmenu svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5;display:block}
.mmenu a[aria-current="page"] svg{stroke:var(--brand)}
.mmenu__out a{color:var(--green)}

/* --- Content panels ---------------------------------------------------- */
.panel{
  border:1px solid var(--border);border-radius:var(--radius);background:var(--paper);
  padding:clamp(24px,3vw,34px);margin-bottom:22px;
}
.panel:last-child{margin-bottom:0}
.panel__head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:8px 20px;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--border);
}
.panel__head h2{margin:0}
.panel__note{font-size:13.5px;color:#6B6B6B}
/* "Fields marked * are required" — .req is only branded inside .label otherwise. */
.panel__note .req{color:var(--brand)}

.fgroup{margin-bottom:30px}
.fgroup:last-of-type{margin-bottom:0}
.fgroup__title{
  font-family:var(--body);font-size:10.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--green);margin:0 0 18px;
  padding-bottom:10px;border-bottom:1px solid var(--border);
}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* --- Data table -------------------------------------------------------- */
.dtable{width:100%;border-collapse:collapse;font-size:14.5px}
.dtable th{
  text-align:left;font-family:var(--body);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green);
  padding:0 14px 12px 0;border-bottom:1px solid var(--border);
}
.dtable td{padding:15px 14px 15px 0;border-bottom:1px solid var(--border);color:var(--heading)}
.dtable tr:last-child td{border-bottom:0}
.dtable th:last-child,.dtable td:last-child{padding-right:0;text-align:right}

.emptystate{
  border:1px dashed #C9C0AC;border-radius:var(--radius);background:var(--paper-warm);
  padding:30px 24px;text-align:center;font-size:14.5px;color:#6B6B6B;
}

/* --- Current photo preview -------------------------------------------- */
.photonow{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:start;margin-bottom:28px}
@media (max-width:520px){.photonow{grid-template-columns:1fr}}
.photonow__img{
  aspect-ratio:4 / 3;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--paper-dim) center / cover no-repeat;
  display:flex;align-items:center;justify-content:center;
}
.photonow__img svg{width:28px;height:28px;stroke:#B5AC97;fill:none;stroke-width:1.3}

/* ==========================================================================
   Project additions — not part of the b4b mock-ups
   Everything below wires the theme into the CakePHP application: the raster
   logo used in the masthead, flash message variants and the CMS content
   rendered inside the theme shell.
   ========================================================================== */

/* --- Masthead logo ----------------------------------------------------- */
/* The mock-ups use a typographic wordmark; the application ships a raster
   logo, so the masthead uses an image and the footer keeps the wordmark. */
.masthead__logo{width:auto;height:52px}
@media (max-width:760px){.masthead__logo{height:44px}}

/* --- Pagination ------------------------------------------------------- */
/* Cake's PaginatorHelper renders <li> items, with .active / .disabled on the
   current and unavailable pages. */
.pagination{
  list-style:none;margin:clamp(28px,4vw,44px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
.pagination li a,.pagination li.active a,.pagination li.disabled a{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;
  padding:11px 13px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--paper);color:var(--heading);text-decoration:none;
  font-size:14px;line-height:1;transition:border-color .16s ease,background-color .16s ease;
}
.pagination li a:hover{border-color:var(--brand);color:var(--brand)}
.pagination li.active a{background:var(--brand);border-color:var(--brand);color:var(--black)}
.pagination li.disabled a{opacity:.4;pointer-events:none}

/* --- jQuery UI datepicker --------------------------------------------- */
/* Attached to .datepicker / .dayticketsdatepicker fields (main.js, plus the
   explicit init in Users/edit_profile.php and Members/buy_guest_ticket.php).
   The bundled jQuery UI download is a structure-only build — it ships no
   theme file — so without these rules the calendar renders as transparent
   text over the page. Every selector is prefixed with .ui-datepicker.ui-widget
   because jquery-ui.structure.min.css is loaded after this stylesheet and its
   single-class rules would otherwise win. */
.ui-datepicker.ui-widget{
  width:302px;padding:14px;z-index:200;
  font-family:var(--body);font-size:14px;font-weight:300;color:var(--text);
  background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 18px 44px rgba(27,27,27,.16);
}
.ui-datepicker.ui-widget .ui-datepicker-header{
  position:relative;padding:0 0 12px;margin:0 0 10px;border-bottom:1px solid var(--border);
}
.ui-datepicker.ui-widget .ui-datepicker-title{
  display:flex;gap:8px;margin:0 38px;line-height:1;
}
.ui-datepicker.ui-widget .ui-datepicker-title select{
  flex:1 1 auto;width:auto;margin:0;cursor:pointer;
  font-family:var(--body);font-size:13.5px;font-weight:300;line-height:1.2;
  color:var(--heading);background:var(--paper);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:8px 28px 8px 10px;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23444' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:10px;
}
.ui-datepicker.ui-widget .ui-datepicker-title select:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(211,137,26,.16);
}

/* Month arrows. The .ui-icon spans need the theme sprite, so they are hidden
   and replaced with a CSS chevron. */
.ui-datepicker.ui-widget .ui-datepicker-prev,
.ui-datepicker.ui-widget .ui-datepicker-next,
.ui-datepicker.ui-widget .ui-datepicker-prev-hover,
.ui-datepicker.ui-widget .ui-datepicker-next-hover{
  top:0;width:32px;height:32px;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--paper);
  transition:border-color .16s ease,background-color .16s ease;
}
.ui-datepicker.ui-widget .ui-datepicker-prev{left:0}
.ui-datepicker.ui-widget .ui-datepicker-next{right:0}
.ui-datepicker.ui-widget .ui-icon{display:none}
.ui-datepicker.ui-widget .ui-datepicker-prev::after,
.ui-datepicker.ui-widget .ui-datepicker-next::after{
  content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;
  border:solid var(--heading);border-width:0 0 1.4px 1.4px;
}
.ui-datepicker.ui-widget .ui-datepicker-prev::after{transform:translate(-30%,-50%) rotate(45deg)}
.ui-datepicker.ui-widget .ui-datepicker-next::after{transform:translate(-70%,-50%) rotate(-135deg)}
.ui-datepicker.ui-widget .ui-datepicker-prev:hover,
.ui-datepicker.ui-widget .ui-datepicker-next:hover{border-color:var(--brand);background:var(--paper-warm)}
.ui-datepicker.ui-widget .ui-datepicker-prev.ui-state-disabled,
.ui-datepicker.ui-widget .ui-datepicker-next.ui-state-disabled{
  opacity:.35;cursor:default;border-color:var(--border);background:var(--paper);
}

/* Calendar grid. The theme's global th/td padding does not apply here — the
   structure stylesheet already scopes its own. */
.ui-datepicker.ui-widget table{margin:0;font-size:14px;border-collapse:collapse}
.ui-datepicker.ui-widget th{
  padding:4px 0 10px;border:0;line-height:1.1;text-align:center;
  font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:#8A8272;
}
.ui-datepicker.ui-widget td{padding:2px;border:0;text-align:center}
.ui-datepicker.ui-widget td a,
.ui-datepicker.ui-widget td span{
  display:block;padding:9px 0;line-height:1.1;text-align:center;text-decoration:none;
  color:var(--heading);background:var(--paper);
  border:1px solid transparent;border-radius:var(--radius);
  transition:border-color .16s ease,background-color .16s ease,color .16s ease;
}
.ui-datepicker.ui-widget td a:hover{background:var(--paper-dim);border-color:var(--border)}
.ui-datepicker.ui-widget td.ui-datepicker-today a{border-color:var(--brand);color:var(--brand-dark)}
.ui-datepicker.ui-widget td a.ui-state-active,
.ui-datepicker.ui-widget td.ui-datepicker-current-day a{
  background:var(--brand);border-color:var(--brand);color:var(--black);font-weight:400;
}
.ui-datepicker.ui-widget td span{color:#B5AC97;cursor:default}
.ui-datepicker.ui-widget .ui-datepicker-other-month a{color:#B5AC97}

/* --- Conditional visibility ------------------------------------------- */
/* RegisterController.js toggles the .hidden class on #additionalDocument; it
   used to come from Bootstrap. */
.hidden{display:none !important}

/* --- Flash messages --------------------------------------------------- */
/* Cake's Flash component renders templates/element/flash/*.php. The error
   variant reuses .alert; success and neutral messages get their own colours. */
.alert--success{border-color:#BCCDB6;border-left-color:var(--green);background:#F6F8F5;color:#3D5138}
.alert--success strong{color:#3D5138}
.alert--info{border-color:var(--border);border-left-color:var(--brand);background:var(--paper-warm);color:var(--text)}
.alert--info strong{color:var(--heading)}

/* --- Sponsors --------------------------------------------------------- */
/* The mock-ups show text tiles; the application stores sponsor logos, and a
   sponsor without a link renders as a non-interactive tile. */
.sponsors__grid .sponsors__tile{
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:#fff;border-radius:var(--radius);
  min-height:74px;padding:14px 18px;
}
.sponsors__grid img{max-height:46px;width:auto}

/* --- Page body -------------------------------------------------------- */
/* Wrapper for CMS content rendered between the masthead and the footer. */
.page{padding-block:clamp(40px,5vw,72px)}
.page > .shell > .alert:last-child{margin-bottom:0}

/* Static page banner replacing the Bootstrap carousels. */
.pagebanner,.top-banner{
  height:clamp(160px,20vw,300px);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  border-bottom:3px solid var(--brand);
}
.slider img{width:100%;height:auto}

/* ==========================================================================
   Legacy bridge — TEMPORARY
   Bootstrap 3 is no longer loaded, but ~45 templates (CMS content, member
   area, bailiff pages, news, venues) still carry its grid, form and button
   classes. This block keeps them readable until each template is rebuilt on
   the theme classes above. Delete a rule as soon as its last consumer is
   converted; the whole block goes away with the last template.
   ========================================================================== */

/* Containers and grid */
.container{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.container-fluid{width:100%;padding-inline:var(--gutter)}
/* Bootstrap rows only. Theme rows (.row.row--2/--3/--dob) keep the grid
   defined above — without this guard the bridge would win on source order. */
.row:not([class*="row--"]){display:flex;flex-wrap:wrap;margin-inline:-11px}
[class*="col-xs-"],[class*="col-sm-"],[class*="col-md-"],[class*="col-lg-"]{
  padding-inline:11px;width:100%;
}
.col-xs-1{width:8.3333%}.col-xs-2{width:16.6667%}.col-xs-3{width:25%}
.col-xs-4{width:33.3333%}.col-xs-5{width:41.6667%}.col-xs-6{width:50%}
.col-xs-7{width:58.3333%}.col-xs-8{width:66.6667%}.col-xs-9{width:75%}
.col-xs-10{width:83.3333%}.col-xs-11{width:91.6667%}.col-xs-12{width:100%}
.col-xs-offset-1{margin-left:8.3333%}
@media (min-width:768px){
  .col-sm-1{width:8.3333%}.col-sm-2{width:16.6667%}.col-sm-3{width:25%}
  .col-sm-4{width:33.3333%}.col-sm-5{width:41.6667%}.col-sm-6{width:50%}
  .col-sm-7{width:58.3333%}.col-sm-8{width:66.6667%}.col-sm-9{width:75%}
  .col-sm-10{width:83.3333%}.col-sm-11{width:91.6667%}.col-sm-12{width:100%}
  .col-sm-offset-5{margin-left:41.6667%}
}
@media (min-width:992px){
  .col-md-1{width:8.3333%}.col-md-2{width:16.6667%}.col-md-3{width:25%}
  .col-md-4{width:33.3333%}.col-md-5{width:41.6667%}.col-md-6{width:50%}
  .col-md-7{width:58.3333%}.col-md-8{width:66.6667%}.col-md-9{width:75%}
  .col-md-10{width:83.3333%}.col-md-11{width:91.6667%}.col-md-12{width:100%}
  .col-md-offset-1{margin-left:8.3333%}
  .col-md-offset-2{margin-left:16.6667%}
  .col-md-offset-7{margin-left:58.3333%}
}
@media (min-width:1200px){
  .col-lg-1{width:8.3333%}.col-lg-2{width:16.6667%}.col-lg-3{width:25%}
  .col-lg-4{width:33.3333%}.col-lg-5{width:41.6667%}.col-lg-6{width:50%}
  .col-lg-7{width:58.3333%}.col-lg-8{width:66.6667%}.col-lg-9{width:75%}
  .col-lg-10{width:83.3333%}.col-lg-11{width:91.6667%}.col-lg-12{width:100%}
  .col-lg-offset-4{margin-left:33.3333%}
}

/* Form controls rendered by config/form-templates.php */
.form-control{
  width:100%;font-family:var(--body);font-size:16px;font-weight:300;line-height:1.5;
  color:var(--heading);background:var(--paper);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;transition:border-color .16s ease,box-shadow .16s ease;
}
.form-control:hover{border-color:#CFC7B4}
.form-control:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(211,137,26,.16)}
textarea.form-control{min-height:130px;resize:vertical}
.form-group{margin-bottom:20px}
label{display:block;font-size:11px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--heading);margin-bottom:9px}
.help-block{display:block;font-size:13px;line-height:1.55;color:#6B6B6B;margin-top:8px}
.error-message{display:block;font-size:13px;color:#A63D3D;margin-top:8px}
.input-group{display:flex;gap:8px;align-items:stretch}
.input-group .form-control{flex:1 1 auto}

/* Buttons */
.btn-success,.btn-primary,.btn-info{background:var(--brand);color:var(--black);border-color:var(--brand)}
.btn-success:hover,.btn-primary:hover,.btn-info:hover{background:var(--accent);border-color:var(--accent);color:var(--black)}
.btn-secondary,.btn-default{background:transparent;border-color:var(--heading);color:var(--heading)}
.btn-secondary:hover,.btn-default:hover{background:var(--heading);color:#fff}
.btn-warning{background:var(--green);border-color:var(--green);color:#fff}
.btn-warning:hover{background:var(--dark-green);border-color:var(--dark-green)}
.btn-danger{background:#A63D3D;border-color:#A63D3D;color:#fff}
.btn-danger:hover{background:#8A2F2F;border-color:#8A2F2F}
.btn-sm{padding:12px 20px;font-size:12px}
.btn-block{width:100%}
.btn-group{display:inline-flex;gap:8px;flex-wrap:wrap}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:15px}
.table-responsive{overflow-x:auto}
th{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--heading);text-align:left}
th,td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:top}
.table-striped tbody tr:nth-child(odd){background:var(--paper-warm)}
.table-bordered th,.table-bordered td{border:1px solid var(--border)}

/* Panels — .panel itself is a theme class (Member area), only the Bootstrap
   sub-elements need bridging. */
.panel-heading{padding:18px 22px;margin:-8px -8px 18px;border-bottom:1px solid var(--border);background:var(--paper-warm)}
.panel-title{font-family:var(--display);font-size:19px;font-weight:400;margin:0}
.panel-body{padding:0}

/* Utilities */
.text-center{text-align:center}
.text-right{text-align:right}
.pull-right{float:right}
.pull-left{float:left}
.clearfix::after{content:"";display:table;clear:both}
.img-responsive{max-width:100%;height:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:767px){.hidden-xs{display:none !important}}
@media (min-width:768px){.visible-xs{display:none !important}}