/**
Theme Name: HPF Trickle Up
Theme URI: https://hurayrapetfoods.com/
Author: Hurayra Pet Foods
Author URI: https://hurayrapetfoods.com/
Description: HPF Trickle Up is a WooCommerce-ready standalone theme for Hurayra Pet Foods. It ships a custom teal header/footer, a Scrumbles-style Shop mega-menu with subscribe/one-time purchase cards, and a large set of WooCommerce & checkout customisations (free shipping for subscriptions, donation-shelter flow, order bumps, GA4 tracking and PCI-friendly login hardening).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
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: hpf-trickle-up
Tags: woocommerce, e-commerce, custom-menu, featured-images, translation-ready, full-width-template
*/

/* =========================================================
 * DESIGN TOKENS — single source of truth for the whole theme.
 * style.css always loads first (main.css declares it a dependency),
 * so these tokens are available everywhere; main.css consumes them
 * and does NOT redefine them.
 *
 * Typography: two fonts only — Quicksand (headings/brand) via
 * --hpf-font-head, Nunito (body) via --hpf-font.
 * =======================================================*/
:root {
	--hpf-teal: #61bac1;
	--hpf-teal-dark: #0d5f59;
	--hpf-pink: #d46681;
	--hpf-white: #ffffff;
	--hpf-ink: #1d2327;
	--hpf-muted: #5b6566;
	--hpf-border: #e6eeed;
	--hpf-bg-soft: #f2f8f7;
	--hpf-maxw: 1512px;
	--hpf-content-maxw: 100%;
	--hpf-gutter: 60px;
	--hpf-radius: 10px;
	--hpf-font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--hpf-font-head: "Quicksand", var(--hpf-font);
}

/* =========================================================
 * HOME / MARKETING DESIGN TOKENS (--hrp-*)
 * The full design system consumed by the Home template and the
 * [hrp_reviews] component (in assets/css/main.css, which loads
 * after this file). Kept as a separate, prefixed set from the
 * --hpf-* chrome tokens above, but housed here so ALL :root
 * custom properties live in one file (single source of truth).
 *
 * Naming: --hrp-<group>-<variant>. Short aliases (--hrp-head,
 * --hrp-body…) are kept for the existing scoped rules.
 * =======================================================*/
:root {

  /* ---- 1. BRAND COLOURS ---- */
  --hrp-teal:        #60BABF;   /* primary brand teal           */
  --hrp-teal-deep:   #3f989d;   /* hover / text-on-light        */
  --hrp-teal-soft:   #e7f4f5;   /* tinted background            */

  --hrp-pink:        #D46681;   /* secondary brand rose         */
  --hrp-pink-deep:   #b94e69;
  --hrp-pink-soft:   #fbeef1;

  --hrp-gold:        #E4B451;   /* accent gold                  */
  --hrp-gold-deep:   #cf9d35;
  --hrp-gold-soft:   #fbf2db;

  --hrp-coral:       #ED8383;   /* donation / playful accents   */
  --hrp-coral-deep:  #e28743;   /* checkout order-bump accent   */

  /* ---- 2. NEUTRALS ---- */
  --hrp-ink:         #414141;   /* default body text            */
  --hrp-ink-soft:    #6c6c6c;   /* muted / secondary text       */
  --hrp-slate:       #45556C;   /* cool grey copy (comparisons) */
  --hrp-black:       #1d2327;
  --hrp-light:       #EFEFEF;   /* light fill                   */
  --hrp-line:        #e7e7e3;   /* hairline borders             */
  --hrp-paper:       #fbfbfa;   /* page background              */
  --hrp-white:       #ffffff;

  /* ---- 3. SEMANTIC / STATUS COLOURS ---- */
  --hrp-success:      #2ec4a0;
  --hrp-success-soft: #e6f8f0;
  --hrp-green:        #1aa35a;  /* "in stock" / positive accent */
  --hrp-warning:      #f5a623;
  --hrp-warning-soft: #fff4e0;
  --hrp-danger:       #e74c4c;
  --hrp-danger-soft:  #fce8ea;

  /* ---- 4. TYPOGRAPHY ---- */
  --hrp-font-head: 'Quicksand', sans-serif;
  --hrp-font-body: 'Nunito', sans-serif;
  --hrp-font-alt:  'Quicksand', 'Nunito', sans-serif;

  /* Back-compat aliases (used by existing scoped stylesheets) */
  --hrp-head: var(--hrp-font-head);
  --hrp-body: var(--hrp-font-body);

  /* Type scale (1rem = 16px base) */
  --hrp-fs-xs:   0.78rem;   /* eyebrows / fine print            */
  --hrp-fs-sm:   0.9rem;
  --hrp-fs-base: 1rem;
  --hrp-fs-md:   1.06rem;
  --hrp-fs-lg:   1.25rem;
  --hrp-fs-xl:   1.5rem;
  --hrp-fs-2xl:  2rem;
  --hrp-fs-3xl:  2.5rem;

  /* Weights */
  --hrp-fw-regular:  400;
  --hrp-fw-medium:   500;
  --hrp-fw-semibold: 600;
  --hrp-fw-bold:     700;
  --hrp-fw-extrabold:800;

  /* Line-heights & tracking */
  --hrp-lh-tight: 1.12;
  --hrp-lh-snug:  1.4;
  --hrp-lh-base:  1.6;
  --hrp-ls-tight: -0.04em;
  --hrp-ls-wide:  0.14em;

  /* ---- 5. SPACING SCALE (4px base) ---- */
  --hrp-space-1:  4px;
  --hrp-space-2:  8px;
  --hrp-space-3:  12px;
  --hrp-space-4:  16px;
  --hrp-space-5:  20px;
  --hrp-space-6:  24px;
  --hrp-space-8:  32px;
  --hrp-space-10: 40px;
  --hrp-space-12: 48px;
  --hrp-space-16: 64px;
  --hrp-space-20: 80px;
  --hrp-space-24: 96px;

  --hrp-section-y: 90px;        /* default vertical section rhythm */

  /* ---- 6. LAYOUT ---- */
  --hrp-maxw:      1280px;      /* default content container       */
  --hrp-maxw-wide: 1520px;      /* PDP / full-bleed container       */
  --hrp-gutter:    24px;        /* container side padding           */

  /* ---- 7. BORDER RADIUS ---- */
  --hrp-radius-sm:     12px;
  --hrp-radius:        18px;    /* default                          */
  --hrp-radius-lg:     26px;
  --hrp-radius-pill:   50px;
  --hrp-radius-circle: 50%;

  /* ---- 8. SHADOWS ---- */
  --hrp-shadow-sm: 0 4px 14px rgba(65, 65, 65, .07);
  --hrp-shadow:    0 14px 40px rgba(65, 65, 65, .10);
  --hrp-shadow-lg: 0 26px 70px rgba(65, 65, 65, .16);

  /* ---- 9. MOTION ---- */
  --hrp-ease:        cubic-bezier(.2, .7, .2, 1);
  --hrp-transition:  .25s var(--hrp-ease);

  /* ---- 10. BREAKPOINTS (reference values) ----
     NOTE: custom properties cannot be used inside @media queries;
     these document the canonical breakpoints reused in media rules. */
  --hrp-bp-xs: 420px;
  --hrp-bp-sm: 480px;
  --hrp-bp-md: 768px;
  --hrp-bp-lg: 1024px;
  --hrp-bp-xl: 1200px;

  /* ---- 11. Z-INDEX ---- */
  --hrp-z-base:    1;
  --hrp-z-sticky:  10;
  --hrp-z-overlay: 100;
  --hrp-z-modal:   1000;
}

/* =========================================================
 * RESET / BASE
 * =======================================================*/
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--hpf-font);
	font-size: 17px;
	line-height: 1.7;
	color: var(--hpf-ink);
	background: var(--hpf-white);
	-webkit-font-smoothing: antialiased;
}

img, svg, video, iframe { max-width: 100%; height: auto; }
img { display: block; }

a { color: var(--hpf-teal); text-decoration: none; }
a:hover, a:focus { color: var(--hpf-pink); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--hpf-font-head);
	line-height: 1.25;
	color: var(--hpf-ink);
	margin: 0 0 0.6em;
}
h1 { font-size: clamp(28px, 4vw, 40px); }
h2 { font-size: clamp(24px, 3vw, 32px); }
h3 { font-size: clamp(20px, 2.4vw, 25px); }

p { margin: 0 0 1.2em; }

ul, ol { margin: 0 0 1.2em; padding-left: 1.4em; }

blockquote {
	margin: 1.5em 0;
	padding: 0.5em 1.2em;
	border-left: 4px solid var(--hpf-teal);
	background: var(--hpf-bg-soft);
	color: var(--hpf-muted);
}

code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre { overflow-x: auto; padding: 1em; background: #0f1a1a; color: #e6f2f1; border-radius: var(--hpf-radius); }

hr { border: 0; border-top: 1px solid var(--hpf-border); margin: 2em 0; }

table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--hpf-border); padding: 0.6em 0.8em; text-align: left; }

/* =========================================================
 * LAYOUT
 * =======================================================*/
.hpf-container {
	width: 100%;
	max-width: var(--hpf-maxw);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--hpf-gutter);
	padding-right: var(--hpf-gutter);
}

.site-content { padding: 40px 0 64px; }

.hpf-main { margin: 0 auto; }

/* Text-first pages/posts read better with a narrower measure. */
.single .hpf-main,
.page .hpf-main,
.search .hpf-main,
.error404 .hpf-main {
	max-width: var(--hpf-content-maxw);
}

/* =========================================================
 * PAGE HEADERS / ENTRIES
 * =======================================================*/
.hpf-page-header { margin: 0 0 32px; }
.hpf-page-title { margin: 0; }
.hpf-archive-description { color: var(--hpf-muted); margin-top: 8px; }

.hpf-loop {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 32px;
}
/* Single-column measure on singular views (loop has one item there). */
.single .hpf-loop,
.page .hpf-loop { display: block; }

.hpf-entry {
	margin: 0 0 8px;
	padding: 0 0 24px;
}
.hpf-loop .hpf-entry {
	background: var(--hpf-white);
	border: 1px solid var(--hpf-border);
	border-radius: var(--hpf-radius);
	overflow: hidden;
	padding: 0 0 20px;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.hpf-loop .hpf-entry:hover { box-shadow: 0 8px 24px rgba(13, 95, 89, 0.08); transform: translateY(-2px); }

.hpf-entry__thumb img { width: 100%; object-fit: cover; }
.hpf-loop .hpf-entry__header,
.hpf-loop .hpf-entry__content { padding-left: 20px; padding-right: 20px; }

.hpf-entry__title { margin: 16px 0 8px; }
.hpf-entry__title a { color: var(--hpf-ink); }
.hpf-entry__title a:hover { color: var(--hpf-teal); }

.hpf-entry__meta {
	font-size: 14px;
	color: var(--hpf-muted);
	margin-bottom: 12px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.hpf-entry__footer { margin-top: 20px; font-size: 14px; color: var(--hpf-muted); }
.hpf-entry__tags { display: block; margin-top: 6px; }

.hpf-readmore {
	display: inline-block;
	margin-top: 8px;
	font-weight: 600;
	color: var(--hpf-teal);
}
.hpf-readmore:hover { color: var(--hpf-pink); text-decoration: none; }

/* =========================================================
 * FORMS / BUTTONS
 * =======================================================*/
input, textarea, select {
	font-family: inherit;
	font-size: 16px;
	color: var(--hpf-ink);
	padding: 12px 14px;
	border: 1px solid var(--hpf-border);
	border-radius: 8px;
	background: var(--hpf-white);
	max-width: 100%;
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--hpf-teal);
	box-shadow: 0 0 0 3px rgba(97, 186, 193, 0.25);
}
textarea { width: 100%; }

button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.hpf-btn {
	display: inline-block;
	cursor: pointer;
	font-weight: 700;
	color: var(--hpf-white);
	background: var(--hpf-teal);
	border: 0;
	border-radius: 999px;
	padding: 12px 26px;
	line-height: 1.2;
	transition: background 0.2s ease;
}
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.hpf-btn:hover { background: var(--hpf-teal); color: var(--hpf-white); }

.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 !important;
	word-wrap: normal !important;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--hpf-ink);
	color: #fff;
	padding: 10px 16px;
	border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* =========================================================
 * PAGINATION / NAVIGATION
 * =======================================================*/
.pagination, .navigation { margin: 48px 0 0; }
.pagination .nav-links,
.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--hpf-border);
	border-radius: 8px;
	color: var(--hpf-ink);
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	background: var(--hpf-teal);
	border-color: var(--hpf-teal);
	color: #fff;
	text-decoration: none;
}

/* =========================================================
 * COMMENTS
 * =======================================================*/
.hpf-comments { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--hpf-border); }
.hpf-comments__list { list-style: none; margin: 0 0 32px; padding: 0; }
.hpf-comments__list ol { list-style: none; }

/* =========================================================
 * WOOCOMMERCE — light spacing/colour so shop pages breathe.
 * WooCommerce ships its own base layout CSS; these are gentle
 * brand overrides only.
 * =======================================================*/
.woocommerce, .woocommerce-page { }
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--hpf-teal);
	color: #fff;
	border-radius: 999px;
	font-weight: 700;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--hpf-teal); color: #fff; }

.woocommerce span.onsale { background: var(--hpf-pink); }
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price { color: var(--hpf-teal); }
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info { border-top-color: var(--hpf-teal); }
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before { color: var(--hpf-teal); }

/* =========================================================
 * RESPONSIVE
 * =======================================================*/
@media (max-width: 1024px) {
	:root { --hpf-gutter: 24px; }
}
@media (max-width: 782px) {
	body { font-size: 16px; }
	.site-content { padding: 24px 0 48px; }
	.hpf-loop { grid-template-columns: 1fr; gap: 24px; }
}