/* Bug test CSS 
* {
  outline: 1px solid red !important;
} */


/* ===== JD Root Colours ===== */
:root{
  --jd-nearly-blk:#151D0A;
  --jd-cream:#F8EDC2;
	--jd-cream-50: rgba(248, 237, 194, 0.5);
  --jd-mustard:#f6a921;
  --jd-welly:#384d3e;
  --jd-olive:#4f6139;
  --jd-olive-light:#6a7a53;
  --jd-red:#e6462d;
	--jd-brown: #211a0f;
	--jd-dark-navy: #193038;
	--gap5: 5px;
	--gap10: 10px;
	--gap20: 20px;
	--gap50: 50px;
	--max-width: 1200px;
	
/* Cinematic slow zoom (constant speed) */

  --cine-zoom-scale: 1.06;         /* subtle; try 1.08 if you want more */
  --cine-zoom-duration: 2400ms;    /* 2.4s; try 3000ms for glacial */
}

.grid .card .thumb{
  opacity: .5;
  transform: scale(1);
  transform-origin: center center;
  transition: transform var(--cine-zoom-duration) linear,
              opacity 250ms linear;
  will-change: transform;
  backface-visibility: hidden;
  /* transform: translateZ(0);  promote to its own layer */
}

.grid .card:hover .thumb,
.grid .card:focus-within .thumb{
  opacity: 1;
  transform: scale(var(--cine-zoom-scale));
}

/* respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  .grid .card .thumb{
    transition: opacity 200ms linear;
    transform: none;
  }
  .grid .card:hover .thumb,
  .grid .card:focus-within .thumb{
    transform: none;
  }
}


/* Smooth in-page anchor scrolling */
html { scroll-behavior: smooth; }

/* If you have a fixed/sticky header, add an offset so anchors don't hide under it */
html { scroll-padding-top: 80px; } /* ← set this to your header height */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
}


/* ========== JD Public Header ========== */
.site-header{
  background: var(--jd-nearly-blk);
  color: var(--jd-cream);
  padding: 20px;
}

/* Header layout */
.site-header .header-inner{
  display:flex;
  align-items:center;
  justify-content:flex-start; /* was space-between */
  gap:10px;
}

.header-inner .p1 {
	padding-top: 5px;
}

/* Anchor is the flex parent; gap via variable */
.site-header .header-left a{
  display:flex;
  align-items:center;
  gap: var(--brand-gap, 10px);
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  contain: layout paint; /* Safari repaint nudge */
}
.site-header .header-left a > *{ cursor:inherit; }

/* Lock the children’s layout boxes */
.site-header .BWrosette,
.site-header .JDXtI{
  flex: 0 0 auto;
}

/* Rosette: stable wrapper + fill image */
.site-header .BWrosette{
  inline-size: 60px;
  aspect-ratio: 1;
  transform: translateZ(0);
  transform-origin: center;
  transition: transform .18s ease;
  will-change: transform;
}
.site-header .BWrosette img{
  display:block;
  inline-size: 100%;
  block-size: auto;
}

/* JDxtI */
.site-header .JDXtI{
  display:flex;
  align-items:center;
  gap: 10px;
}
.site-header .JDXtI > img{
  display:block;
  block-size: 60px;   /* height */
  inline-size: auto;  /* width auto */
}

/* Hover/focus states */
.site-header .header-left a:hover .BWrosette,
.site-header .header-left a:focus-visible .BWrosette{
  transform: scale(1.08);
}
.site-header .header-left a:active .BWrosette{
  transform: scale(0.98);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .site-header .BWrosette{ transition: none; }
}

/* <=640px — shrink + tighter gap */
@media (max-width:640px){
  :root{ --brand-gap: 6px; }

  .site-header .BWrosette{ inline-size: 40px; }
  .site-header .JDXtI > img{ block-size: 40px; }

  .site-header .header-left .p1{ display:none; }

  .site-header .header-inner{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap: 0;
  }
}


/* Hover/press states unchanged; still only transform (no layout shift) */
.site-header .header-left a:hover .BWrosette,
.site-header .header-left a:focus-visible .BWrosette{ transform: scale(1.08); }
.site-header .header-left a:active .BWrosette{ transform: scale(0.98); }

@media (prefers-reduced-motion: reduce){
  .site-header .BWrosette{ transition: none; }
}
/* Right group: glued to the right edge */
.site-header .header-right{
  margin-left:auto;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;            /* pack items to the right */
  gap:8px;                             
  min-width:0;
}

/* Right group glued to the edge */
.site-header .header-right{
  margin-left:auto;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
}

/* Tools rail = exactly 80px */
.site-header .header-right .header-tools{
  flex:0 0 80px;
  width:80px; min-width:80px; max-width:80px;
  display:flex; justify-content:flex-end; align-items:center;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}

/* Panel shrink-wraps; greeting above; buttons on a single row */
.site-header .header-right .user-panel{
  display:inline-flex;
  flex-direction:column;       /* stack greeting over buttons row */
  align-items:flex-start;      /* left-align both lines */
  gap:4px;                     /* space between greeting and buttons row */
  flex:0 0 auto;               /* don't stretch into the middle */
}

/* Buttons row hugs content with a small gap */
.site-header .header-right .user-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;            /* keep them on one line */
}

/* (optional) tighter pills for this row only */
.site-header .header-right .user-actions > .btn{
  padding:4px 8px;
  gap:0;
}

/* Greeting stays on one line */
.site-header .header-right .user-greet{
  margin:0;
  white-space:nowrap;
}

/* collapsed state */
.login-drawer{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .35s ease, opacity .25s ease;
  will-change: max-height, opacity;
}

/* expanded state */
.login-drawer.is-open{
  /* max-height is set inline via JS to the content height for a smooth auto-height slide */
  opacity: 1;
}

/* nice-to-have */
@media (prefers-reduced-motion: reduce){
  .login-drawer{ transition: none; }
}

/* Breadcrumb & Search */

form.search{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 12px; }
.search input{
  flex:1; min-width:240px; padding:10px; border:1px solid #ddd; border-radius:8px;
  background:#fff; color:#000;
}

/*
.search button{
  padding:10px 14px; border:1px solid var(--jd-nearly-blk); background:var(--jd-nearly-blk);
  color:#fff; border-radius:8px; cursor:pointer;
}*/

/*
.site-header .user-panel{ outline:1px dashed rgba(255,255,255,.25); }
.site-header .header-right .header-tools{ outline:1px dashed rgba(255,200,0,.4); }
*/

/* ----- Mini buttons (re-usable) ----- */
/* Buttons = h4 type */

/* Mini buttons: h4 type + uppercase + animated scale */
.btn.mini{
  /* existing layout */
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:6px 10px; border-radius:999px; text-decoration:none;

  /* your h4 typography */
  font-family: var(--font-display);
  font-size: calc(var(--h4) - 2px);
  line-height: var(--h4-line, 1.1);
  font-weight: var(--h4-weight, 500);

  /* uppercase look */
  text-transform: uppercase;
  letter-spacing: .02em;

  /* colours (inherit your variants) */
  background: var(--jd-olive);
  color: var(--jd-nearly-blk);
  border: 1px solid transparent;

  /* animation */
  transform: translateZ(0) scale(1);
  transform-origin: center;
  transition: transform .14s ease, background .15s ease, color .15s ease, border-color .15s ease;
  will-change: transform;
}

/* hover = slight pop */
.btn.mini:hover{ transform: scale(1.1); color: var(--jd-cream); text-decoration: none; }

/* active = subtle press */
.btn.mini:active{ transform: scale(0.9); }

/* keyboard focus */
.btn.mini:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 2px var(--jd-cream), 0 0 0 4px var(--jd-mustard);
}

/* variants inherit type & animation automatically */
.btn.mini.outline{
  background: transparent;
  color: var(--jd-olive);
  border-color: var(--jd-olive);
}
.btn.mini.outline:hover{ 
  border-style: solid;
  background: var(--jd-olive);
  color: var(--jd-cream);
}

.btn.mini.ghost{
  background: transparent;
  color: var(--jd-olive);
  border: 1px dashed var(--jd-olive);
}
.btn.mini.ghost:hover{
  border-style: solid;
  background: var(--jd-olive);
  color: var(--jd-cream);
}

/* reduce motion preference */
@media (prefers-reduced-motion: reduce){
  .btn.mini{ transition: background .15s ease, color .15s ease, border-color .15s ease; }
  .btn.mini:hover, .btn.mini:active{ transform:none; }
}

/* make both <a> and <button> with .btn feel the same */
.btn,
.btn.mini{
  cursor: pointer;              /* ← hand cursor */
  -webkit-appearance: none;     /* avoid odd iOS styles */
  appearance: none;
}

/* optional disabled state */
button.btn[disabled],
.btn.is-disabled{
  cursor: not-allowed;
  opacity: .6;
  pointer-events: none;
}


/* Drawer host must be relative so the border sits flush */
.site-header{ position: relative; }

/* Slide-down login drawer (hidden by default) */
.login-drawer{
  max-height: 0;
  overflow: hidden;
  color: var(--jd-nearly-blk);
  transition: max-height .25s ease, opacity .2s ease, transform .2s ease;
  opacity: 0;
  transform: translateY(-6px);
}

/* When open */
.site-header.login-open .login-drawer{
  max-height: 280px;           /* enough for the form; adjust if needed */
  opacity: 1;
  transform: translateY(0);
}

/* Layout unchanged */
.login-form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  padding: 20px 10px 10px;
}
.login-form .field{ display:grid; gap:5px; }
.login-form .label{ color: var(--jd-olive); }

/* Inputs: h4 type + dark bg + cream border */
.login-form input[type="email"],
.login-form input[type="password"]{
  width: 90%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--jd-olive);
  background: var(--jd-nearly-blk);      /* fixed var() */
  color: var(--jd-olive);

  /* h4 typography */
  font-family: var(--font-display);
  font-size: calc(var(--h4) - 2px);
  line-height: var(--h4-line, 1.1);
  font-weight: var(--h4-weight, 500);
  letter-spacing: .02em;

  /* smooth interactions */
  transition: border-color .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease;
  -webkit-appearance: none;
  appearance: none;
}

/* Hover & focus */
.login-form input[type="email"]:hover,
.login-form input[type="password"]:hover{
  border-color: var(--jd-olive-light);
}
.login-form input[type="email"]:focus,
.login-form input[type="password"]:focus{
  outline: 0;
  border-color: var(--jd-olive);
}

/* Placeholder */
.login-form input::placeholder{
  color: color-mix(in srgb, var(--jd-cream) 60%, transparent);
  opacity: .9;
}

/* Autofill (WebKit) */
.login-form input:-webkit-autofill{
  -webkit-text-fill-color: var(--jd-cream);
  transition: background-color 9999s ease-out, color 9999s ease-out;
}
.login-form input:-webkit-autofill,
.login-form input:-webkit-autofill:focus{
  box-shadow: 0 0 0px 1000px var(--jd-nearly-blk) inset;
  border: 1px solid var(--jd-olive);
}

/* Actions row stays on one line */
.login-form .actions{
  grid-column: 1 / -1;
  display:flex;
  gap:8px;
  align-items:center;
}

/* Stack on narrow screens */
@media (max-width: 560px){
  .login-form{ grid-template-columns: 1fr; }
}

.login-form input[type="email"]{ text-transform: uppercase; }


.page-title {
	padding: 0 0 0 20px;
	margin: 0;
}

/* Wrapper: breadcrumb left, search right */
.breadcrumb-search{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin: 0 0 20px;
  padding: 0 20px;
}

/* Breadcrumb block */
.breadcrumb{ flex: 1 1 auto; }

/* Search block (do NOT grow) */
.breadcrumb-search .search{
  display:flex;
  align-items:baseline;
  gap:10px;
}

/* Input sizing: compact, not full width */
.breadcrumb-search .search input{
  width: 28ch;          /* nice readable width */
  max-width: 40vw;      /* don’t explode on huge screens */
  min-width: 220px;
  background: transparent;
  color: var(--jd-cream);
  border: 1px solid var(--jd-cream);
  border-radius: 20px;
  padding: 10px 15px 7px;

/* Search input uses p1 typography */

  font-family: "Courier New", monospace;
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  color: var(--jd-cream);              /* same as .p1 */
  text-transform: none;
  -webkit-font-smoothing: auto;  /* undo global antialiasing */
  text-rendering: optimizeSpeed;  /* keep strokes solid */
  caret-color: var(--jd-cream);         /* optional: matching caret */
}

.breadcrumb-search .search input{
  transform: translateY(-1px);
}

/* Placeholder to match (slightly dimmed) */
.breadcrumb-search .search input::placeholder{
  color: var(--jd-cream);
  opacity: .25;
  -webkit-font-smoothing: auto;
  text-rendering: optimizeSpeed;
}


/* Tight, predictable baselines */
.breadcrumb .crumb{ line-height: 1; }   /* keeps h3 baseline clean */




/* (optional) micro-nudge if needed */
.breadcrumb-search .search{ transform: translateY(1px); } /* adjust 0–2px by eye */


.breadcrumb-search .search input::placeholder{ color: var(--jd-cream); }

.breadcrumb-search .search button{
  border:1px solid var(--jd-cream);
  background: transparent;
  color: var(--jd-cream);
  padding: 10px 15px 8px;
  border-radius: 20px;
  cursor:pointer;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  -webkit-appearance: none;
  appearance: none;

  /* animation bits */
  transform: scale(1);
  transition:
    transform .5s ease,
    background-color .5s ease,
    color .5s ease,
    border-color .5s ease;
  will-change: transform;
	line-height: 1; 
}

.breadcrumb-search .search button:hover{
  background: var(--jd-mustard);
  color: var(--jd-nearly-blk);
	border: 1px solid var(--jd-mustard);
  transform: scale(1.1);
}

.breadcrumb-search .search a.try-again,
.breadcrumb-search .search a.clear{
  border:1px solid var(--jd-cream);
  background: transparent;
  color: var(--jd-cream);
  padding: 10px 15px 8px;
  border-radius: 20px;
  cursor:pointer;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
	text-decoration: none;
  letter-spacing: .02em;
  -webkit-appearance: none;
  appearance: none;

  /* animation bits */
  transform: scale(1);
  transition:
    transform .5s ease,
    background-color .5s ease,
    color .5s ease,
    border-color .5s ease;
  will-change: transform;
	line-height: 1; 
}



.breadcrumb-search .search a.try-again:hover,
.breadcrumb-search .search a.clear:hover{
  background: var(--jd-mustard);
  color: var(--jd-nearly-blk);
	border: 1px solid var(--jd-mustard);
  transform: scale(1.02);
}

.breadcrumb-search .search a.try-again,
.breadcrumb-search .search a.clear,
.breadcrumb-search .search button:active{
  transform: scale(0.9);
}

/* Nice focus ring for keyboard users */
.breadcrumb-search .search button:focus-visible{
  outline: 2px solid var(--jd-mustard);
  outline-offset: 2px;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .breadcrumb-search .search button{
    transition: none;
    transform: none;
  }
}

/* Make the scope <select> look like the Search button */
.breadcrumb-search .search select {
  border: 1px solid var(--jd-cream);
  background: transparent;
  color: var(--jd-cream);
  padding: 10px 44px 8px 14px; /* extra right room for the chevron */
  border-radius: 20px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Animated like the button */
  transform: scale(1);
  transition:
    transform .5s ease,
    background-color .5s ease,
    color .5s ease,
    border-color .5s ease;
  will-change: transform;

  /* Chevron (uses currentColor so it adapts on hover) */
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position: right 14px center;
}

/* Hide IE arrow */
.breadcrumb-search .search select::-ms-expand { display: none; }

/* Hover/focus to match button behavior 
.breadcrumb-search .search select:hover,
.breadcrumb-search .search select:focus {
  background-color: var(--jd-mustard);
  color: var(--jd-nearly-blk);
  border-color: var(--jd-mustard);
  transform: scale(1.1);
  outline: none;
}*/

/* Stronger focus-visible ring for accessibility (optional) */
.breadcrumb-search .search select:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--jd-mustard) 60%, transparent);
}

/* Options (limited browser support but helps on dark UIs) */
.breadcrumb-search .search select option {
  background: var(--jd-nearly-blk);
  color: var(--jd-cream);
}



/* Stack on smaller screens: search under breadcrumb */
@media (max-width: 720px){
  .breadcrumb-search{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .breadcrumb-search .search{
    width: 100%;
  }
  .breadcrumb-search .search input{
    flex: 1 1 auto;   /* allow to grow just within the search row */
    width: auto;      /* not full page width */
    min-width: 0;
    max-width: 100%;
  }
}


/* Breadcrumb layout */
.breadcrumb ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:5px;
}
.breadcrumb li{
  display:inline-flex; align-items:center; gap:5px; position:relative;
}

/* Arrow divider using your SVG */
.breadcrumb li + li::before{
  content:"";
  width:18px; height:18px; display:inline-block; flex:0 0 18px;
  /* If your SVG is monochrome and you want to tint it: */
  -webkit-mask: url("/JD/Assets/SVG/arrow-right.svg") no-repeat center / contain;
          mask: url("/JD/Assets/SVG/arrow-right.svg") no-repeat center / contain;
  background-color: var(--jd-cream);
  opacity:.9;
  /* Fallback if mask isn’t supported: show the raw SVG colors */
  background-image: url("/JD/Assets/SVG/arrow-right.svg");
  background-repeat:no-repeat; background-position:center; background-size:contain;
}

/* Add a down-arrow after the last crumb ("Article") */
.breadcrumb li:last-child::after{
  content:"";
  display:inline-block;
  width:18px;
  height:18px;
  margin-left:0px;
  transform: translateY(2px); /* micro-align with baseline */

  /* Mask technique (lets you tint with current brand color) */
  -webkit-mask: url("/JD/Assets/SVG/arrow-down.svg") no-repeat center / contain;
          mask: url("/JD/Assets/SVG/arrow-down.svg") no-repeat center / contain;
  background-color: var(--jd-cream);

  /* Fallback if mask isn’t supported: show the SVG itself */
  background-image: url("/JD/Assets/SVG/arrow-down.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* If your down arrow is already cream in the asset, you can drop background-color */
}


/* base */
.breadcrumb .crumb{
  margin:0;
  color: var(--jd-cream);
  transition: color .5s ease; /* smooth fade */
}

/* keep your base link reset */
.breadcrumb .crumb a{
  color: inherit;
  text-decoration: none;
}

/* on hover, use longhands so your vars apply */
.breadcrumb .crumb a:hover{
  color: var(--jd-mustard);
  text-decoration-line: underline;              /* instead of text-decoration: underline */
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
  /* optional: color for the underline itself */
  text-decoration-color: currentColor;
}

/* Current item (no link underline) */
.breadcrumb [aria-current="page"] .crumb{
  opacity: .95;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);          /* legacy */
  clip-path: inset(50%);        /* modern */
  white-space: nowrap;          /* prevent line breaks */
}




/* Highlight for search snippets */
.hl{ background: rgba(246,169,33,.18); color: var(--jd-mustard); }




/* Upper Nav */
.upper-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin: 0 0 10px;
}

.upper-nav h1 {
  margin: 0;
}

.upper-nav a {
  color: var(--jd-cream, #f8edc2);
  text-decoration: none;
  transition: color 0.5s ease;
}

.upper-nav a:hover {
  color: var(--jd-mustard, #f6a921);
  text-decoration: underline;
  text-decoration-thickness: var(--underline-thickness, 3px);
  text-underline-offset: var(--underline-offset, 4px);
}

/* <=640px — shrink + tighter gap */
@media (max-width:640px){
	.upper-nav { gap: 20px; }
	.upper-nav h1 { font-size: calc(var(--h1, 40px) - 20px); }
}




/* === Utilities: just add a word to the class === */

/* character widths */
.ch-26{ --copy-width:26ch; }
.ch-32{ --copy-width:32ch; }
.ch-40{ --copy-width:40ch; }
.ch-52{ --copy-width:52ch; }
.ch-66{ --copy-width:66ch; }

/* logo widths */
.logo-100{ --logo-w:100px; }
.logo-120{ --logo-w:120px; }
.logo-140{ --logo-w:140px; }
.logo-160{ --logo-w:160px; }
.logo-180{ --logo-w:180px; }
.logo-220{ --logo-w:220px; }




/* Reset default hr look */
hr {
  border: 0;
  height: 0;               /* remove UA height */
  margin: 0;
}

/* Dashed rule using color-mix with 50% var(--jd-cream) */
hr.rule {
  border-top: 1px dashed color-mix(in srgb, var(--jd-cream) 50%, transparent);
}

/* Fallback for older browsers (no color-mix): */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  hr.rule { border-top: 1px dashed rgba(248, 237, 194, 0.5); } /* #F8EDC2 @ 50% */
}

/* Draw a dashed rule above, with space above & below the line */
.with-top-rule{
  --rule-color: color-mix(in srgb, var(--jd-cream) 50%, transparent);
  position: relative;
}
.with-top-rule::before{
  content: "";
  display: block;
  border-top: 1px dashed var(--rule-color);
  margin-block: var(--gap20);  /* space above & below the rule */
}



hr.space5 {
  margin-top: 5px;
}

hr.space10 {
  margin-top: 10px;
}

hr.space20 {
  margin-top: 20px;
}


/* base: add a dot before the element */
.with-dot{
  --dot-color: currentColor;   /* default: matches text color */
}
.with-dot::before{
  content: "";
  display: inline-block;
  width: .5em;                 /* size of the dot */
  height: .5em;
  border-radius: 50%;
  background: var(--dot-color);
  margin-right: .5em;
  /* translate: 0 .12em;           nudge to sit on the baseline */
}

/* size variants (optional) */
.dot-sm::before{ width:.35em; height:.35em; }
.dot-lg::before{ width:.65em; height:.65em; }

/* color variants (optional, won’t affect text color) */
.dot-mustard{ --dot-color: var(--jd-mustard); }
.dot-cream{   --dot-color: var(--jd-cream); }
.dot-olive{   --dot-color: var(--jd-olive); }





/* Site Header */


/* Layout the panel items in a row */
.site-header .user-panel{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Buttons grouped nicely */
.site-header .user-panel .user-actions{
  display: inline-flex;
  gap: 8px;
}

/* Push the avatar to the far right edge of the panel */
.site-header .user-panel .user-avatar-link{
  margin-left: auto;             /* moves avatar to the right */
  display: inline-flex;
  align-items: center;
}

/* Circular avatar */
.site-header .user-avatar{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--jd-nearly-blk, #151D0A);
  border: 3px solid rgba(255,255,255,0.25);
}

/**/

.site-header .header-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  min-width:0;
  flex-wrap:nowrap;
}

.site-header .header-right .header-tools:empty{
  flex:0 0 0;
  width:0; min-width:0; max-width:0;
}

.site-header .header-avatar{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

.site-header .user-avatar{
  width:40px; height:40px;
  border-radius:50%;
  object-fit:cover;
  background: var(--jd-nearly-blk,#151D0A);
  border:3px solid var(--jd-olive);
}





/* Footer */


/* Upper Nav */
.footer-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap20, 20px);
  margin: 10px 0 20px;
}

.footer-nav h2 {
  margin: 0;
}

.footer-nav a {
  color: var(--jd-cream, #f8edc2);
  text-decoration: none;
  transition: color 0.5s ease;
}

.footer-nav a:hover {
  color: var(--jd-mustard, #f6a921);
  text-decoration: underline;
  text-decoration-thickness: var(--underline-thickness, 3px);
  text-underline-offset: var(--underline-offset, 4px);
}

/* <=640px — shrink + tighter gap */
@media (max-width:640px){
	.footer-nav { gap: 20px; }
	.footer-nav h2 { font-size: calc(var(--h2, 30px) - 10px); }
}



/* Row that holds multiple pairs */
.brand-row{
  display:flex;
  justify-content:center;      /* center the whole set */
  align-items:flex-start;
  gap: var(--gap10, 10px);
  flex-wrap: wrap;              /* wrap on small screens */
	margin: 0; padding: 0;
}

/* Make each pair shrink-to-fit inside the row */
.brand-row > .brand-lockup{
  width:auto;                   /* override any width:100% */
  justify-content:flex-start;   /* align logo + text left inside the pair */
}

/* Keep your existing pair styles; add these if you don't have them */
.brand-lockup{
  display:flex;
  align-items:center;
  gap: var(--gap10, 10px);
}


/* Logo sizing (controls the inline SVG) */
.brand-lockup .brand-svg svg{
  display:block;
  width: var(--logo-w, 180px);
  height:auto;
}

/* Character-based max width per pair */
.brand-lockup .brand-copy{ max-inline-size: var(--copy-width, 32ch); }
.brand-lockup .brand-copy p{ margin:0; }


/* optional: tighter on small screens (stack) */
@media (max-width: 560px){
  .brand-lockup{ flex-direction:column; text-align:center; }
}

.brand-svg { color: var(--jd-cream); display:inline-block; }
.brand-svg svg { width: 120px; height: auto; display:block; }
.brand-svg:hover { color: var(--jd-mustard); } /* easy hover color swap */



/* anchor is the wrapper; everything inherits its color */
.brand-link{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  color: var(--jd-cream);
  transition: color .5s ease;
}





/* =========================================================
   Footer: Mailing List + Contact Form (side-by-side, centered)
   ========================================================= */

/* ===== Layout: two equal columns centered (>=641px) ===== */
.site-footer .footer-cols{
  display:flex;
  flex-direction:row;           /* side-by-side on larger screens */
  justify-content:center;       /* center the pair */
  align-items:stretch;
  gap:80px;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 10px;
  flex-wrap:nowrap;             /* keep them in one row >=641px */
}

/* Contact on the left, Mailing List on the right */
.site-footer .footer-cols > .contact-form,
.site-footer .footer-cols > .ml-footer-form{
  flex:1 1 0;
  max-width:560px;
  width:100%;
  display:block;
  padding:20px;
  box-sizing:border-box;
}

/* =========================================
   Contact Form / Mailing List (desktop)
   ========================================= */




/* ===== Fields: always stacked vertically inside each form ===== */
.ml-footer-form .ml-fields,
.contact-form .ml-fields{
  display:flex;
  flex-direction:column;        /* <-- stack, not row */
  align-items:stretch;          /* make children fill the column */
  gap:10px;
}

/* Inputs */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.ml-footer-form input[type="text"],
.ml-footer-form input[type="email"]{
  /*width:28ch;                  nice readable width /
  max-width:30vw;              don’t explode on huge screens 
  min-width:220px;*/
  background:transparent;
  color:var(--jd-cream);
  border:1px solid var(--jd-cream);
  border-radius:20px;
  padding:10px 15px 7px;
  font-family:"Courier New", monospace;
  font-size:12px;
  line-height:14px;
  font-weight:500;
  text-transform:none;
  -webkit-font-smoothing:auto;
  text-rendering:optimizeSpeed;
  caret-color:var(--jd-cream);
  box-sizing:border-box;      /* include padding/border in width */
}

/* Placeholder to match (slightly dimmed) */
.contact-form textarea::placeholder,
.contact-form input::placeholder,
.ml-footer-form input::placeholder{
  color:var(--jd-cream);
  opacity:.25;
  -webkit-font-smoothing:auto;
  text-rendering:optimizeSpeed;
}

/* Button (fix selector: was .ml-footer-form.btn) */
.contact-form .btn,
.contact-form button,
.ml-footer-form .btn,
.ml-footer-form button{
  border:1px solid var(--jd-cream);
  background:transparent;
  color:var(--jd-cream);
  padding:10px 15px 8px;
  border-radius:20px;
  cursor:pointer;
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.02em;
  -webkit-appearance:none;
  appearance:none;
  transform:scale(1);
  transition:
    transform .5s ease,
    background-color .5s ease,
    color .5s ease,
    border-color .5s ease;
  line-height:1;
  box-sizing:border-box;
}

.contact-form .btn:hover,
.contact-form button:hover,
.ml-footer-form .btn:hover,
.ml-footer-form button:hover{
  background:var(--jd-mustard);
  color:var(--jd-nearly-blk);
  border:1px solid var(--jd-mustard);
  transform:scale(1.1);
}

/* Note */
.ml-footer-form .ml-note{
  margin:0 0 20px;
  opacity:.8;
  max-width:50ch;
}

/* Honeypot */
.ml-footer-form .hp{
  position:absolute !important;
  left:-99999px !important;
  width:1px; height:1px; overflow:hidden;
}

/* Accessibility helper */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}




/* =========================================
   RWD: Stack + full-width at small screens
   ========================================= */
@media (max-width:640px){

  /* Stack the two blocks and stretch them */
  .site-footer .footer-cols{
    flex-direction:column;
    align-items:stretch;
    gap:20px;                 /* vertical gap between blocks */
    padding-inline:12px;      /* a bit of side breathing room */
  }

  /* Each form goes full width (remove desktop caps) */
  .site-footer .footer-cols > .ml-footer-form,
  .site-footer .footer-cols > .contact-form{
    flex:0 1 auto;
    max-width:none;
    width:100%;
    padding:20px;
  }

  /* Inside the forms: stack fields + make controls 100% */
  .ml-footer-form .ml-fields,
  .contact-form .ml-fields{
    flex-direction:column;
    align-items:stretch;
    width:100%;
    margin-inline:auto;
  }

  .ml-footer-form input[type="text"],
  .ml-footer-form input[type="email"],
  .ml-footer-form textarea,
  .ml-footer-form .btn,
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form input[type="tel"],
  .contact-form textarea,
  .contact-form .btn{
    width:100%;
    max-width:none;
    min-width:0;
    display:block;
    box-sizing:border-box;
  }
}


/* Users/Sharklings */

.fav-panel{ display:flex; align-items:center; gap:10px; margin:12px 0 6px; }
.fav-btn{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:18px; cursor:pointer;
  border:1px solid var(--jd-cream,#F8EDC2); background:transparent; color:var(--jd-cream,#F8EDC2);
}
.fav-btn .fav-heart{ font-size:14px; transform:translateY(-1px); }
.fav-btn.is-on{
  background: var(--jd-mustard,#f6a921);
  color: var(--jd-nearly-blk,#151D0A);
  border-color: var(--jd-mustard,#f6a921);
}


.fav-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; margin:10px 0 20px; }

.fav-card{
  background: transparent;
  color: var(--jd-cream, #F8EDC2); /* base colour */
  transition: color .5s ease, border-color .3s ease, background .3s ease;
}

.fav-card img{ display:block; width:100%; height:auto; }
.fav-card .meta{ padding:10px; }
.fav-card .title{ margin:5px 0 0; color:var(--jd-cream,#F8EDC2); }
.fav-card .sub{ margin:0 0 2px; color:var(--jd-cream,#F8EDC2); }
.fav-card .date{ color:var(--jd-cream,#F8EDC2); }

.fav-card .title,
.fav-card .sub,
.fav-card .date,
.fav-card a{
  color: inherit; /* so they follow the card's color */
  text-decoration: none;
  display: block;
}

.fav-card:hover{
  background: var(--jd-brown);
  color: var(--jd-mustard, #f6a921); /* all text turns mustard */
}


/* S E R P */

/* 45° ribbon with fixed visual size */
.badges .badge{
  --bg: var(--jd-olive);
  --fg: var(--jd-cream);
  --w: 160px;      /* visual length along the ribbon */
  --h: 18px;       /* ribbon thickness */
  --radius: 6px;

  position: relative;
  display:inline-flex; align-items:center; justify-content:center;
  width: var(--w); height: var(--h);
  background: var(--bg); color: var(--fg);
  border-radius: var(--radius);
  padding: 0 10px;
  white-space: nowrap;

  /* anchor to the corner consistently */
  transform-origin: top right;
  transform: translate(36%, -36%) rotate(45deg);
  pointer-events:auto;

  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--h4) - 4px);
  text-transform: uppercase;
  line-height: 1;
}

/* keep text upright */
.badges .badge > span{ display:inline-block; transform: rotate(-45deg); }

/* colour variants */
.badges .badge.b-prem{ --bg: var(--jd-red); --fg: var(--fg); }

.badges .badge.b-ovr{ --bg: transparent; color: var(--fg);}

.badges .badge.b-free{ --bg: var(--jd-olive); --fg: var(--fg); }

.badges .badge{
  transition:
    background-color .35s ease,
    color .35s ease,
    box-shadow .35s ease,
    filter .35s ease;
}

/* R W D */

/* Mobile: put header-right above header-left and keep it flush right */
@media (max-width:640px){
  .site-header .header-inner{
    display: flex;
    flex-direction: column;   /* stack vertically */
    align-items: stretch;
    gap: 10px;
  }

  .site-header .header-right{
    order: -1;                /* show first (above) */
    margin-left: 0;           /* cancel desktop push */
    width: 100%;
    justify-content: flex-end;/* keep its content to the right edge */
    align-items: center;
  }

  .site-header .header-left{
    order: 0;                 /* second (below) */
    width: 100%;
  }

  /* If header-tools is empty, don't reserve space on mobile */
  .site-header .header-right .header-tools:empty{
    flex: 0 0 0;
    width: 0; min-width: 0; max-width: 0;
  }
}