/*
Theme Name: Dog Grooming Kits
Theme URI: https://doggroomingkits.com/
Author: DGK / Cowork build
Author URI: https://doggroomingkits.com/
Description: Custom editorial "Broadsheet / Poster" affiliate-review theme for doggroomingkits.com. Flat surfaces, hard edges, 2px rules, navy poster fields, grayscale imagery, Archivo throughout. Ships with review and guide custom post types, filterable archives, and starter content. Requires the free Advanced Custom Fields plugin for full review/guide data entry.
Version: 1.1.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: doggroomingkits
*/

/* ==========================================================================
   Design tokens — Modernist base + doggroomingkits blue ramp.
   The base neutrals/components are ported from the Modernist design system.
   The accent ramps below REPLACE the system's red with the site's blue.
   ========================================================================== */
:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 18%, transparent);

  /* Neutral ramp (from Modernist) */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  /* Blue accent ramp — the brand ramp (replaces Modernist red) */
  --color-accent:     #1a4fae;
  --color-accent-2:   #3f8fd2;
  --color-accent-100: #eff5fd;
  --color-accent-200: #dce9fa;
  --color-accent-300: #bdd6f4;
  --color-accent-400: #8ab3e9;
  --color-accent-500: #4a86d8;
  --color-accent-600: #2b67bd;
  --color-accent-700: #1c4f9a;
  --color-accent-800: #173d75;
  --color-accent-900: #14294a;

  --color-accent-2-100: #eef6fc;
  --color-accent-2-200: #d9ecf9;
  --color-accent-2-300: #b8daf3;
  --color-accent-2-400: #83bce6;
  --color-accent-2-500: #4498d3;
  --color-accent-2-600: #297bb4;
  --color-accent-2-700: #1c5f8e;
  --color-accent-2-800: #18496b;
  --color-accent-2-900: #143246;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  --dgk-max: 1440px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-600); }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.dgk-shell { max-width: var(--dgk-max); margin: 0 auto; background: var(--color-bg); }
.dgk-shell--sky { background: var(--color-accent-2-100); }

/* Grayscale imagery — photos read as blue-ink print */
.grayscale { filter: grayscale(1) contrast(1.08); }
.grayscale img { filter: none; }

/* ==========================================================================
   Rules
   ========================================================================== */
.hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }

/* ==========================================================================
   Forms
   ========================================================================== */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
select.input { appearance: auto; }

/* ==========================================================================
   Cards + elevation
   ========================================================================== */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* ==========================================================================
   Tags
   ========================================================================== */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px; border-radius: 0;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* ==========================================================================
   Tables
   ========================================================================== */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* ==========================================================================
   Nav hover helper (inline style-hover in mockups → real :hover here)
   ========================================================================== */
.dgk-nav a { text-decoration: none; }
.dgk-nav__link:hover { color: #fff !important; }
.dgk-nav__link--active { color: #fff !important; border-bottom: 2px solid var(--color-accent-2-400); padding-bottom: 2px; }
.dgk-cta:hover { background: var(--color-accent-100) !important; }

/* Generic hover utilities used across templates */
.hv-row:hover { background: var(--color-bg); }
.hv-accent:hover { color: var(--color-accent-700); }
.hv-accent:hover .hv-accent__title { color: var(--color-accent-700); }
.hv-chip:hover { background: var(--color-accent-200) !important; }
.hv-navy:hover { background: var(--color-accent-700) !important; }
.hv-tile:hover { background: var(--color-accent-100) !important; }
.hv-white:hover { background: var(--color-accent-100) !important; }
.hv-accent-link:hover { color: var(--color-accent-700) !important; }

/* ==========================================================================
   Hero slider
   ========================================================================== */
.dgk-slider { position: relative; overflow: hidden; background: var(--color-accent-800); border-bottom: 2px solid var(--color-text); }
.dgk-slider__track { display: flex; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.dgk-slide { flex: 0 0 100%; display: grid; grid-template-columns: 1.2fr 1fr; min-height: 560px; }
.dgk-slide__body { padding: 72px 48px 110px; display: flex; flex-direction: column; gap: 28px; justify-content: center; }
.dgk-slide__img { position: relative; border-left: 2px solid var(--color-accent-600); }
.dgk-slider__controls { position: absolute; left: 48px; bottom: 28px; display: flex; gap: 12px; align-items: center; }
.dgk-slider__arrow { width: 40px; height: 40px; border: 2px solid var(--color-accent-400); background: transparent; color: #fff; font-size: 16px; cursor: pointer; }
.dgk-slider__arrow:hover { background: var(--color-accent-700); }
.dgk-slider__dot { width: 28px; height: 6px; border: none; padding: 0; cursor: pointer; background: var(--color-accent-600); }
.dgk-slider__dot.is-active { background: #fff; }

/* ==========================================================================
   Guide step rail
   ========================================================================== */
.dgk-rail__indicator { position: absolute; top: 0; bottom: 0; left: 0; width: 16.6667%; background: var(--color-accent); transition: transform .35s cubic-bezier(.4,0,.2,1); }
.dgk-rail__cell { position: relative; text-decoration: none; padding: 13px 16px; font: 700 13px var(--font-heading); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text); border-right: 1px solid var(--color-divider); }
.dgk-rail__cell:last-child { border-right: none; }
.dgk-rail__cell.is-active { color: #fff; }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.dgk-faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  width: 100%; background: none; border: none; padding: 18px 0; cursor: pointer;
  text-align: left; font: 800 17px var(--font-heading); color: var(--color-text);
}
.dgk-faq__q:hover { color: var(--color-accent-700); }
.dgk-faq__icon { font: 800 22px/1 var(--font-heading); color: var(--color-accent); }
.dgk-faq__a { margin: 0; padding: 0 40px 20px 0; font: 400 15px/1.6 var(--font-body); color: var(--color-neutral-800); max-width: 68ch; }
.dgk-faq__item[hidden] { display: none; }

/* ==========================================================================
   Archive filtering (client-side) helpers
   ========================================================================== */
.dgk-check { width: 16px; height: 16px; border: 2px solid var(--color-text); flex: 0 0 auto; background: transparent; }
.dgk-check.is-on { background: var(--color-accent); }
.dgk-filter-btn { display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 6px 0; cursor: pointer; font: 500 14px var(--font-body); color: var(--color-text); text-align: left; width: 100%; }
.dgk-filter-btn:hover { color: var(--color-accent-700); }
.dgk-card[hidden] { display: none !important; }
.dgk-pagebtn { width: 42px; height: 42px; border: none; cursor: pointer; font: 800 15px var(--font-heading); color: #fff; background: var(--color-accent-800); }
.dgk-pagebtn:hover { background: var(--color-accent-600); }
.dgk-pagebtn.is-active { background: var(--color-accent-500); }
.dgk-pageedge { background: var(--color-accent-800); color: #fff; border: none; font: 700 14px var(--font-heading); padding: 0 18px; height: 42px; cursor: pointer; }
.dgk-pageedge:hover { background: var(--color-accent-700); }
.dgk-pageedge:disabled { opacity: .45; cursor: default; }
.dgk-catrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; background: none; border: none; border-bottom: 1px solid var(--color-divider); padding: 11px 0; cursor: pointer; text-align: left; font: 500 15px var(--font-body); color: var(--color-text); }
.dgk-catrow:hover { color: var(--color-accent-600); }
.dgk-catrow.is-active { font-weight: 800; color: var(--color-accent-700); }

/* ==========================================================================
   WordPress core / editor classes
   ========================================================================== */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: #fff; color: var(--color-accent-800); clip: auto; clip-path: none;
  display: block; height: auto; width: auto; left: 6px; top: 7px; padding: 12px 18px;
  font: 700 14px var(--font-heading); z-index: 100000; box-shadow: var(--shadow-md);
}
.alignleft { float: left; margin: 0 var(--space-6) var(--space-4) 0; }
.alignright { float: right; margin: 0 0 var(--space-4) var(--space-6); }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 12px; color: var(--color-neutral-700); margin-top: var(--space-1); }
.sticky, .gallery-caption, .bypostauthor { display: block; }

/* Prose (page.php / single fallback content) */
.dgk-prose { max-width: 70ch; font: 400 16px/1.65 var(--font-body); color: var(--color-neutral-800); }
.dgk-prose h2 { font: 900 30px/1.05 var(--font-heading); letter-spacing: -0.02em; margin: 32px 0 12px; color: var(--color-text); }
.dgk-prose h3 { font: 900 22px/1.1 var(--font-heading); margin: 24px 0 10px; color: var(--color-text); }
.dgk-prose a { color: var(--color-accent-700); }
.dgk-prose img { border: 2px solid var(--color-text); margin: 20px 0; }
.dgk-prose ul, .dgk-prose ol { padding-left: 22px; }
.dgk-prose blockquote { border-left: 4px solid var(--color-accent); background: var(--color-accent-100); margin: 20px 0; padding: 16px 22px; }

/* ==========================================================================
   Responsive — collapse the poster grids on narrow screens
   ========================================================================== */
@media (max-width: 1080px) {
  .dgk-slide { grid-template-columns: 1fr; }
  .dgk-slide__img { min-height: 320px; border-left: none; border-top: 2px solid var(--color-accent-600); }
  .dgk-grid-2, .dgk-grid-split { grid-template-columns: 1fr !important; }
  .dgk-header-split { grid-template-columns: 1fr !important; }
  .dgk-header-split__img { min-height: 300px !important; border-left: none !important; border-top: 2px solid var(--color-accent-600); }
  .dgk-body-grid { grid-template-columns: 1fr !important; }
  .dgk-body-grid__rail { border-left: none !important; border-right: none !important; border-top: 2px solid var(--color-text); }
}
@media (max-width: 860px) {
  .dgk-nav { flex-wrap: wrap; gap: 16px !important; padding: 16px 24px !important; }
  .dgk-nav__search { width: 100% !important; }
  .dgk-grid-3 { grid-template-columns: 1fr 1fr !important; }
  .dgk-catindex { grid-template-columns: 60px 1fr 40px !important; }
  .dgk-catindex__desc { display: none; }
  .dgk-pad { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 620px) {
  .dgk-grid-2, .dgk-grid-3 { grid-template-columns: 1fr !important; }
  h1 { font-size: 34px !important; }
  .dgk-hero-h1 { font-size: 40px !important; }
}