/*
  little doris site styles. Mobile first; Bootstrap 5 underneath.
  The look is the old site's: the Savona 1.0.27 theme defaults (white, greys, no accent colour) with
  Lizzie's custom CSS on top (Courier New 15px everywhere, page titles hidden). Every value comes from
  docs/migration/reference/theme-settings.md; change the custom properties below, not the rules.
*/

:root {
  /* Palette: Savona defaults, unchanged by Lizzie */
  --ld-bg: #ffffff;                /* page and header background */
  --ld-text: #464646;              /* body text */
  --ld-title: #030303;             /* titles */
  --ld-meta: #a1a1a1;              /* Savona meta text: decorative use only (2.6:1 on white) */
  --ld-muted: #757575;             /* readable stand-in for meta text (4.6:1, WCAG AA); Lizzie to see */
  --ld-accent: #999999;            /* Savona "accent": link and button hover only */
  --ld-border: #e8e8e8;
  --ld-button-bg: #333333;
  --ld-button-text: #ffffff;
  --ld-button-hover: #999999;
  --ld-nav-bg: #ffffff;
  --ld-nav-link: #000000;
  --ld-nav-hover: #999999;
  --ld-footer-bg: #f6f6f6;
  --ld-footer-text: #333333;
  --ld-footer-title: #111111;
  --ld-footer-border: #e0dbdb;
  --ld-overlay: #494949;           /* captions over images */
  --ld-surface: #f6f6f6;           /* summaries and empty image boxes: the footer grey */
  --ld-notice-bg: #f6f6f6;
  --ld-paused-bg: #fff3cd;
  --ld-strapline: #696969;         /* home page strapline (Lizzie's block colour) */

  /* Type: Lizzie's custom CSS. System Courier New only; no web font until Lizzie decides. */
  --ld-font: "Courier New", Courier, "Nimbus Mono PS", "Liberation Mono", monospace;
  --ld-font-size: 15px;
  --ld-letter-spacing: 0;
  --ld-strapline-size: 38px;
  --ld-caption-size: 24px;

  /* Shape */
  --ld-radius: 4px;                /* the "our ethos" outline button */
  --ld-card-ratio: 1 / 1;          /* product image aspect (WooCommerce square crop) */
  --ld-logo-width: 281px;          /* logo.png is 562 x 246; shown at half size for sharp high-DPI */

  /* Map onto Bootstrap */
  --bs-body-font-family: var(--ld-font);
  --bs-body-font-size: var(--ld-font-size);
  --bs-body-color: var(--ld-text);
  --bs-body-bg: var(--ld-bg);
  --bs-heading-color: var(--ld-title);
  --bs-link-color: var(--ld-title);
  --bs-link-color-rgb: 3, 3, 3;
  --bs-link-hover-color: var(--ld-accent);
  --bs-link-hover-color-rgb: 153, 153, 153;
  --bs-border-color: var(--ld-border);
  --bs-border-radius: var(--ld-radius);
  --bs-secondary-color: var(--ld-muted);
}

html { font-size: var(--ld-font-size); }
body { background: var(--ld-bg); color: var(--ld-text); font-family: var(--ld-font); letter-spacing: var(--ld-letter-spacing); }

/* Phone widths: every text block wraps inside the 16px gutter; long words and URLs break rather than
   widen the page. Flex children may shrink below their content (Bootstrap columns, breadcrumb items). */
body { overflow-wrap: break-word; }
.ld-main h1, .ld-main h2, .ld-main h3, .breadcrumb-item, .ld-prose, .ld-main p { overflow-wrap: anywhere; }
.row > *, .breadcrumb-item { min-width: 0; }
.container { --bs-gutter-x: 32px; } /* 16px each side */

/* Everything is monospace, headings included (Lizzie's CSS overrode Playfair Display and Open Sans). */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, legend,
.ld-page-title, .ld-section-title, .ld-card-title, .ld-strapline, .ld-footer-title,
.btn, .form-control, .form-select, .dropdown-menu, .badge, .navbar, .nav-link {
  font-family: var(--ld-font) !important; /* no serif anywhere: theme-settings.md, every h1-h6 was Courier New */
  letter-spacing: var(--ld-letter-spacing);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ld-title); font-weight: 400; }
.text-muted { color: var(--ld-muted) !important; }

.ld-skip { position: absolute; left: 1rem; top: 0.5rem; z-index: 1050; background: var(--ld-bg); padding: 0.5rem; }

/* Buttons: Savona #333 with white text, hover #999 */
.btn-primary {
  --bs-btn-bg: var(--ld-button-bg);
  --bs-btn-border-color: var(--ld-button-bg);
  --bs-btn-color: var(--ld-button-text);
  --bs-btn-hover-bg: var(--ld-button-hover);
  --bs-btn-hover-border-color: var(--ld-button-hover);
  --bs-btn-hover-color: var(--ld-button-text);
  --bs-btn-active-bg: var(--ld-button-hover);
  --bs-btn-active-border-color: var(--ld-button-hover);
  --bs-btn-disabled-bg: var(--ld-meta);
  --bs-btn-disabled-border-color: var(--ld-meta);
  --bs-btn-border-radius: 0;
}
/* The "our ethos" outline button: black text on white, 4px radius */
.ld-btn-outline {
  --bs-btn-color: var(--ld-title);
  --bs-btn-bg: var(--ld-bg);
  --bs-btn-border-color: var(--ld-title);
  --bs-btn-hover-color: var(--ld-bg);
  --bs-btn-hover-bg: var(--ld-button-bg);
  --bs-btn-hover-border-color: var(--ld-button-bg);
  --bs-btn-border-radius: var(--ld-radius);
  min-width: 35%;                  /* Lizzie widened the 25% outline buttons to 35% */
  padding: 0.6rem 1.5rem;
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--ld-button-bg); }
.nav-pills .nav-link { color: var(--ld-text); }
.pagination { --bs-pagination-active-bg: var(--ld-button-bg); --bs-pagination-active-border-color: var(--ld-button-bg); --bs-pagination-color: var(--ld-text); }

:focus-visible { outline: 2px solid var(--ld-title); outline-offset: 2px; }

/* Notice banner (ShopSettings) */
.ld-notice { background: var(--ld-notice-bg); border-bottom: 1px solid var(--ld-border); }
.ld-notice-paused { background: var(--ld-paused-bg); }

/* Header: centred logo on white, then the one horizontal menu (Savona) */
.ld-brand { text-align: center; padding: 2rem 1rem 1.5rem; }
.ld-logo { display: inline-block; }
.ld-logo img { width: var(--ld-logo-width); max-width: 70vw; height: auto; display: block; }
.ld-nav {
  background: var(--ld-nav-bg);
  border-top: 1px solid var(--ld-border);
  border-bottom: 1px solid var(--ld-border);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
}
.ld-nav .nav-link { color: var(--ld-nav-link); padding-inline: 0.9rem !important; }
.ld-nav .nav-link:hover, .ld-nav .nav-link:focus { color: var(--ld-nav-hover); }
.ld-nav .dropdown-menu { border-radius: 0; border-color: var(--ld-border); }
.ld-basket-link { color: var(--ld-nav-link); text-decoration: none; margin-left: auto; white-space: nowrap; }
.ld-basket-link:hover, .ld-basket-link:focus { color: var(--ld-nav-hover); }
.ld-badge { display: inline-block; min-width: 1.5em; padding: 0 0.3em; border: 1px solid currentColor; border-radius: 1em; text-align: center; font-size: 0.85em; }

/* Page furniture */
.ld-main { padding-top: 2rem; padding-bottom: 2rem; }
.ld-page-title { font-size: 1.6rem; margin-bottom: 1rem; }
.ld-section-title { font-size: 1.3rem; text-align: center; margin-bottom: 1.25rem; }
.ld-narrow { max-width: 42rem; margin-inline: auto; }
.breadcrumb { font-size: 0.9rem; }
.ld-prose img { max-width: 100%; height: auto; }
.ld-prose a { text-decoration: underline; }

/* Home: the old front page's blocks (theme-settings.md "Home page") */
.ld-home-intro { min-height: 338px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem 0.5rem; }
.ld-strapline { color: var(--ld-strapline); font-size: clamp(22px, 5vw, var(--ld-strapline-size)); line-height: 1.3; max-width: 60rem; margin-bottom: 1.75rem; }
.ld-strapline-sub { color: var(--ld-muted); }
.ld-cover, .ld-tile { position: relative; display: block; overflow: hidden; color: #fff; text-decoration: none; }
.ld-cover { min-height: 430px; margin: 1.5rem 0; }
.ld-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ld-tile img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.ld-cover-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1rem 1rem; text-align: center;
  font-size: var(--ld-caption-size); color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); /* the faint dark gradient */
}
.ld-cover:hover img, .ld-tile:hover img { opacity: 0.92; }
.ld-cover:focus-visible, .ld-tile:focus-visible { outline-offset: 4px; }
.ld-tiles { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0; }
@media (min-width: 576px) { .ld-tiles { grid-template-columns: 1fr 1fr; } }

/* Content pages: Lizzie hid page titles (.page-title display:none); kept for screen readers */
.ld-content-title { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; }

/* Product cards */
.ld-card { display: block; color: var(--ld-text); text-decoration: none; text-align: center; }
.ld-card-img { position: relative; aspect-ratio: var(--ld-card-ratio); background: var(--ld-surface); overflow: hidden; }
.ld-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.ld-card:hover .ld-card-img img { transform: scale(1.03); }
.ld-card-badge { position: absolute; top: 0.5rem; left: 0.5rem; background: var(--ld-bg); color: var(--ld-text); font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: var(--ld-radius); }
.ld-card-title { font-size: var(--ld-font-size); font-weight: 400; line-height: 1.4; margin: 0.6rem 0 0.2rem; } /* same 15px as body, like the Woo grid */
.ld-card-price { font-size: var(--ld-font-size); color: var(--ld-text); margin: 0; }

/* Product page */
.ld-gallery-main { width: 100%; height: auto; aspect-ratio: var(--ld-card-ratio); object-fit: cover; background: var(--ld-surface); }
.ld-thumb { border: 1px solid var(--ld-border); padding: 0; background: none; }
.ld-thumb img { display: block; object-fit: cover; }
.ld-price { font-size: 1.3rem; color: var(--ld-title); }
.ld-stock { color: var(--ld-muted); min-height: 1.2em; }
.ld-qty { width: 5.5rem; }
.ld-maker-note { border-left: 3px solid var(--ld-border); padding-left: 1rem; font-style: italic; color: var(--ld-muted); }

/* Basket, checkout, order */
.ld-basket-line { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--ld-border); }
.ld-basket-thumb { width: 80px; height: 80px; object-fit: cover; flex-shrink: 0; background: var(--ld-surface); }
.ld-summary { background: var(--ld-surface); padding: 1rem; border-radius: var(--ld-radius); }
.ld-postcode { max-width: 12rem; text-transform: uppercase; }

/* Forms: error summary, fieldsets */
.ld-error-summary:focus { outline: 3px solid var(--ld-title); outline-offset: 2px; }
.ld-error-summary a { color: inherit; font-weight: 600; }
fieldset legend { color: var(--ld-title); }
[aria-invalid="true"] { border-color: var(--bs-danger); }

/* Thanks page */
.ld-spinner { color: var(--ld-text); width: 2.5rem; height: 2.5rem; }

/* Order status timeline: a vertical list with a dot per step; current step in the accent colour */
.ld-timeline { list-style: none; padding: 0 0 0 1.25rem; margin: 0 0 1.5rem; border-left: 2px solid var(--ld-border); }
.ld-timeline li { position: relative; padding: 0 0 0.9rem 0.75rem; }
.ld-timeline li::before {
  content: ""; position: absolute; left: calc(-1.25rem - 6px); top: 0.35rem;
  width: 10px; height: 10px; border-radius: 50%; background: var(--ld-bg); border: 2px solid var(--ld-border);
}
.ld-timeline-done::before { background: var(--ld-muted); border-color: var(--ld-muted); }
.ld-timeline-current::before { background: var(--ld-title); border-color: var(--ld-title); width: 12px; height: 12px; left: calc(-1.25rem - 7px); }
.ld-timeline-current .ld-timeline-label { font-weight: 600; }
.ld-timeline-upcoming { color: var(--ld-muted); }
.ld-timeline-date { display: block; font-size: 0.85rem; color: var(--ld-muted); }
.ld-tracking-number { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.04em; }

/* 404 / 410 / 429 / 500 */
.ld-status-page { padding: 2rem 0 1rem; }
.ld-status-code { font-size: 3.5rem; line-height: 1; color: var(--ld-meta); margin-bottom: 0.5rem; }

/* Footer: Savona default, light grey */
.ld-footer { background: var(--ld-footer-bg); color: var(--ld-footer-text); border-top: 1px solid var(--ld-footer-border); }
.ld-footer a { color: var(--ld-footer-text); }
.ld-footer a:hover, .ld-footer a:focus { color: var(--ld-accent); }
.ld-footer-title { font-size: 1rem; color: var(--ld-footer-title); margin-bottom: 0.5rem; }
.ld-footer-small { color: var(--ld-footer-text); font-size: 0.85rem; }

@media (min-width: 768px) {
  .ld-page-title { font-size: 1.9rem; }
  .ld-brand { padding: 2.75rem 1rem 2rem; }
}