/*
Theme Name:   Kelpie Cards
Theme URI:    https://kelpiecards.co.uk
Description:  Child theme of Kadence for Kelpie Cards — honest Pokémon cards from Falkirk.
Author:       Scott, Kelpie Cards
Author URI:   https://kelpiecards.co.uk
Template:     kadence
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  kelpie-cards
Tags:         e-commerce, accessibility-ready
*/

/* ==========================================================================
   KELPIE CARDS — brand implementation
   Design system: see 01-brand/visual-identity.md

   Contents
   01. Design tokens
   02. Dark mode
   03. Base typography
   04. Layout & readable measure
   05. Buttons
   06. Links
   07. Forms
   08. Product cards
   09. Prices & badges
   10. Trust block
   11. WooCommerce overrides
   12. Content blocks (tables, quotes, condition guide)
   13. Header & footer
   14. Accessibility & motion
   15. Print
   ========================================================================== */


/* 01. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Core palette */
  --kc-loch:        #0F3B47;
  --kc-loch-deep:   #092830;
  --kc-steel:       #5B7C8A;
  --kc-steel-light: #A8BEC7;
  --kc-copper:      #C4632B;
  --kc-copper-deep: #9E4E20;
  --kc-paper:       #F8F5EF;
  --kc-card:        #FFFFFF;
  --kc-ink:         #162126;
  --kc-ink-soft:    #4A5A62;

  /* Functional */
  --kc-success:     #2E6B4F;
  --kc-warn:        #A9761C;
  --kc-error:       #A32E23;

  /* Type
     Fraunces + Inter are self-hosted — see functions.php.
     Fallbacks are deliberate and tested; the site is fully usable without
     the webfonts, which is why font-display is swap. */
  --kc-font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --kc-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Form */
  --kc-radius:      6px;
  --kc-radius-lg:   8px;
  --kc-maxwidth:    68ch;

  /* Spacing scale */
  --kc-space-xs:    0.5rem;
  --kc-space-sm:    0.75rem;
  --kc-space-md:    1.25rem;
  --kc-space-lg:    2rem;
  --kc-space-xl:    3.5rem;

  /* The only two shadows in the system. Resist adding more. */
  --kc-shadow-hover: 0 2px 10px rgba(15, 59, 71, 0.10);
  --kc-shadow-focus: 0 0 0 3px rgba(196, 99, 43, 0.35);
}


/* 02. DARK MODE
   Respects the OS preference. Kadence may also set its own palette in the
   customiser — these tokens win because they're loaded after the parent.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --kc-paper:       #101A1E;
    --kc-card:        #182529;
    --kc-ink:         #E8EEF0;
    --kc-ink-soft:    #9FB2BA;
    --kc-copper:      #E07C42;
    --kc-copper-deep: #C4632B;
    --kc-loch:        #7FA9B8;
    --kc-loch-deep:   #A8BEC7;
    --kc-steel:       #7E9AA6;
    --kc-steel-light: #33474F;
    --kc-shadow-hover: 0 2px 10px rgba(0, 0, 0, 0.45);
  }
}


/* 03. BASE TYPOGRAPHY
   Scale from visual-identity.md. Mobile-first: base values are the mobile
   sizes, stepped up at 782px (Kadence's tablet breakpoint).
   ========================================================================== */

body {
  font-family: var(--kc-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--kc-ink);
  background-color: var(--kc-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--kc-font-head);
  font-weight: 600;
  line-height: 1.2;
  color: var(--kc-loch);
  letter-spacing: -0.01em;
}

h1, .entry-title { font-size: 32px; margin-bottom: var(--kc-space-md); }
h2               { font-size: 26px; margin-top: var(--kc-space-lg); margin-bottom: var(--kc-space-sm); }
h3               { font-size: 20px; margin-top: var(--kc-space-md); margin-bottom: var(--kc-space-xs); }
h4               { font-size: 18px; }

p { margin-bottom: var(--kc-space-md); }

small, .kc-meta {
  font-size: 14px;
  color: var(--kc-ink-soft);
}

/* --kc-steel is a border and icon colour. It fails WCAG AA for body text on
   paper, so it is never applied to text below 18px. Enforced by convention. */
.kc-steel-text {
  color: var(--kc-steel);
  font-size: 18px;
}

@media (min-width: 782px) {
  body           { font-size: 17px; }
  h1, .entry-title { font-size: 44px; }
  h2             { font-size: 32px; }
  h3             { font-size: 24px; }
}


/* 04. LAYOUT & READABLE MEASURE
   Long-form trust content is the main SEO asset, so it has to be genuinely
   comfortable to read. 68ch is the cap from the design system.
   ========================================================================== */

.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > blockquote {
  max-width: var(--kc-maxwidth);
}

.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > figure,
.entry-content > table,
.entry-content > .wp-block-table {
  max-width: none;
}


/* 05. BUTTONS
   Flat, 6px radius, no gradient, no shadow at rest. Copper fill.
   White on copper is ~4.6:1 — AA for normal text, fine at button size.
   ========================================================================== */

.kc-btn,
.wp-block-button__link,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  display: inline-block;
  font-family: var(--kc-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  padding: 14px 24px;
  border: none;
  border-radius: var(--kc-radius);
  background-color: var(--kc-copper);
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.kc-btn:hover,
.wp-block-button__link:hover,
button.button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--kc-copper-deep);
  color: #FFFFFF;
}

/* Secondary — loch outline */
.kc-btn--secondary,
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--kc-loch);
  border: 1.5px solid var(--kc-loch);
  padding: 12.5px 22.5px; /* keeps total box height identical to primary */
}

.kc-btn--secondary:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--kc-loch);
  color: var(--kc-paper);
}

.kc-btn[disabled],
button[disabled] {
  background-color: var(--kc-steel-light);
  color: var(--kc-ink-soft);
  cursor: not-allowed;
}


/* 06. LINKS
   ========================================================================== */

a {
  color: var(--kc-copper-deep);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Nav and button links carry their own styling */
.site-header a,
.site-footer a,
.wp-block-button__link,
.kc-btn,
.woocommerce-loop-product__link {
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}


/* 07. FORMS
   Labels always visible above the field — never placeholder-only, which
   fails for screen readers and for anyone who forgets what a field was.
   ========================================================================== */

label {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--kc-ink);
  margin-bottom: var(--kc-space-xs);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea {
  width: 100%;
  font-family: var(--kc-font-body);
  font-size: 16px; /* 16px minimum stops iOS zooming the page on focus */
  line-height: 1.5;
  padding: 11px 12px;
  color: var(--kc-ink);
  background-color: var(--kc-card);
  border: 1px solid var(--kc-steel);
  border-radius: var(--kc-radius);
  margin-bottom: var(--kc-space-md);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--kc-copper);
  box-shadow: var(--kc-shadow-focus);
}

.kc-field-hint {
  display: block;
  margin-top: -0.75rem;
  margin-bottom: var(--kc-space-md);
  font-size: 14px;
  color: var(--kc-ink-soft);
}


/* 08. PRODUCT CARDS
   ========================================================================== */

.kc-product-card,
.woocommerce ul.products li.product {
  background-color: var(--kc-card);
  border: 1px solid var(--kc-steel-light);
  border-radius: var(--kc-radius-lg);
  padding: var(--kc-space-md);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.kc-product-card:hover,
.woocommerce ul.products li.product:hover {
  box-shadow: var(--kc-shadow-hover);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 18px;
  margin: var(--kc-space-sm) 0 var(--kc-space-xs);
}

.woocommerce ul.products li.product img {
  border-radius: var(--kc-radius);
  margin-bottom: var(--kc-space-xs);
}


/* 09. PRICES & BADGES
   Tabular numerals so prices align in a column and don't jitter.
   ========================================================================== */

.price,
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price,
.kc-price {
  font-family: var(--kc-font-body);
  font-size: 22px;
  font-weight: 600;
  color: var(--kc-ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Strikethrough RRP — ONLY where the comparison price is genuinely accurate.
   Fake reference pricing breaks the Fair Trade Promise and UK pricing law. */
.price del,
.kc-price--was {
  font-size: 16px;
  font-weight: 400;
  color: var(--kc-ink-soft);
  text-decoration: line-through;
  margin-right: var(--kc-space-xs);
}

.price ins {
  text-decoration: none;
}

.kc-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--kc-radius);
  color: #FFFFFF;
  background-color: var(--kc-steel);
}

.kc-badge--stock    { background-color: var(--kc-success); }
.kc-badge--preorder { background-color: var(--kc-warn); }
.kc-badge--last     { background-color: var(--kc-copper); }
.kc-badge--out      { background-color: var(--kc-error); }

/* No countdown timers, no "12 people viewing", no scarcity theatre.
   Deliberately absent — see 01-brand/visual-identity.md. */


/* 10. TRUST BLOCK
   Appears on every product page. See inc/trust-block.php.
   ========================================================================== */

.kc-trust {
  background-color: var(--kc-paper);
  border-left: 3px solid var(--kc-loch);
  border-radius: 0 var(--kc-radius) var(--kc-radius) 0;
  padding: var(--kc-space-md);
  margin: var(--kc-space-lg) 0;
}

.kc-trust__title {
  font-family: var(--kc-font-head);
  font-size: 18px;
  font-weight: 600;
  color: var(--kc-loch);
  margin: 0 0 var(--kc-space-sm);
}

.kc-trust__list {
  list-style: none;
  margin: 0 0 var(--kc-space-sm);
  padding: 0;
  font-size: 15px;
}

.kc-trust__list li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: var(--kc-space-xs);
}

.kc-trust__list li::before {
  content: "";
  position: absolute;
  left: 0.35em;
  top: 0.45em;
  width: 0.45em;
  height: 0.22em;
  border-left: 2px solid var(--kc-success);
  border-bottom: 2px solid var(--kc-success);
  transform: rotate(-45deg);
}

.kc-trust__address {
  font-size: 14px;
  color: var(--kc-ink-soft);
  margin: 0;
}


/* 11. WOOCOMMERCE OVERRIDES
   ========================================================================== */

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  border-top-color: var(--kc-loch);
  background-color: var(--kc-card);
}

.woocommerce .woocommerce-error {
  border-top-color: var(--kc-error);
}

.woocommerce span.onsale {
  background-color: var(--kc-copper);
  color: #FFFFFF;
  border-radius: var(--kc-radius);
  font-weight: 500;
  min-height: auto;
  min-width: auto;
  padding: 6px 12px;
  line-height: 1;
}

.woocommerce .star-rating span::before {
  color: var(--kc-copper);
}

/* Stock status */
.woocommerce div.product .stock         { color: var(--kc-success); font-weight: 500; }
.woocommerce div.product .out-of-stock  { color: var(--kc-error); font-weight: 500; }

/* Condition attribute table — the honesty surface. Make it legible. */
.woocommerce table.shop_attributes th {
  color: var(--kc-loch);
  font-weight: 600;
}

.woocommerce table.shop_attributes td {
  font-style: normal; /* Woo italicises these by default; it reads as hedging */
}


/* 12. CONTENT BLOCKS
   ========================================================================== */

/* Wide content must scroll inside itself — the page body never scrolls
   sideways. Matters most on the pricing and condition tables on mobile. */
.entry-content .wp-block-table,
.kc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
}

th, td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--kc-steel-light);
}

th {
  font-weight: 600;
  color: var(--kc-loch);
  background-color: var(--kc-paper);
}

blockquote {
  border-left: 3px solid var(--kc-copper);
  padding-left: var(--kc-space-md);
  margin-left: 0;
  color: var(--kc-ink-soft);
  font-style: normal;
}

code {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.9em;
  background-color: var(--kc-paper);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

img {
  max-width: 100%;
  height: auto;
}


/* 13. HEADER & FOOTER
   ========================================================================== */

.site-header {
  background-color: var(--kc-card);
  border-bottom: 1px solid var(--kc-steel-light);
}

.site-footer {
  background-color: var(--kc-loch-deep);
  color: var(--kc-steel-light);
  font-size: 15px;
}

.site-footer a {
  color: var(--kc-paper);
}

/* Required on every page — trader identity and the IP disclaimer.
   See 02-web/legal-pages.md and 01-brand/ip-guardrails.md. */
.kc-footer-legal {
  font-size: 13px;
  line-height: 1.5;
  color: var(--kc-steel-light);
  max-width: 70ch;
  margin-top: var(--kc-space-md);
}


/* 14. ACCESSIBILITY & MOTION
   ========================================================================== */

/* Visible focus on everything interactive. Never remove this. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--kc-copper);
  outline-offset: 2px;
  border-radius: 2px;
}

.kc-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--kc-loch);
  color: #FFFFFF;
  text-decoration: none;
}

.kc-skip-link:focus {
  left: 0;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* 15. PRINT
   Packing slips and the condition guide get printed. Make them sane.
   ========================================================================== */

@media print {
  body {
    background: #FFFFFF;
    color: #000000;
    font-size: 12pt;
  }

  .site-header,
  .site-footer,
  .kc-btn,
  .wp-block-button,
  nav,
  form {
    display: none !important;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #444;
  }

  h1, h2, h3 { page-break-after: avoid; }
  table, blockquote, figure { page-break-inside: avoid; }
}