/*
 Theme Name:   Cenotaph
 Theme URI:    https://southvanremembers.org
 Description:  SVVCS GP theme 2025
 Author:       Joss Rowlands
 Author URI:   https://nudg.ca
 Template:     generatepress
 Version:      0.1
*/



/* =========================
   TYPOGRAPHY
========================= */

/* Font Family Utilities */
.ff-body {
    font-family: var(--gp-font--body);
}

.ff-heading {
    font-family: var(--gp-font--headings);
}
.ff-button {
    font-family: var(--gp-font--buttons);
}

/* Heading and utility class font assignment */
h1, h2, h3, h4, h5, h6,
[class^="fs-"] {
    font-family: var(--gp-font--headings);
}

.fs-p {
    font-family: var(--gp-font--body);
}

/* =========================
   FLUID TYPOGRAPHY SCALE
   Source: https://theadminbar.com/simple-responsive-font-size-calculator/
========================= 
*/
h1,
.fs-h1 {
    font-size: clamp(3.375rem, 3.0682rem + 1.2273vw, 4.05rem);
}

h2,
.fs-h2 {
    font-size: clamp(2.5313rem, 2.3011rem + 0.9205vw, 3.0375rem);
}

h3,
.fs-h3 {
    font-size: clamp(2.1094rem, 1.9176rem + 0.767vw, 2.5313rem);
}

h4,
.fs-h4 {
    font-size: clamp(1.6875rem, 1.5341rem + 0.6136vw, 2.025rem);
}

h5,
.fs-h5 {
    font-size: clamp(1.4063rem, 1.2784rem + 0.5114vw, 1.6875rem);
}

h6,
.fs-h6 {
    font-size: clamp(1.2656rem, 1.1506rem + 0.4602vw, 1.5188rem);
}

p,
.fs-p {
    font-size: clamp(0.9375rem, 0.8523rem + 0.3409vw, 1.125rem);
*/
}

/* Animate JS Element */
@media (prefers-reduced-motion: no-preference) {
  .animate {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.5s ease, transform 0.4s ease;
    will-change: opacity, transform;
  }

  .animate.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Disable animation in the editor preview */
  .editor-styles-wrapper .animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* BG Dots */
.bg-dots{
	background-image: radial-gradient(grey 1px, transparent 1px);
	background-size: 20px 20px;
  background-position: center;
}


/*. =====================
	LANDING POPPY BUTTON
	===================== */

/* Add spacing between text and the poppy icon on that button */
.poppy-gap {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;            /* increase/decrease to taste */
}

/* Ensure the SVG doesn’t wiggle baseline alignment */
.poppy-gap .gb-shape svg {
  display: block;
}

/* Optional: slightly larger or smaller icon without editing the HTML width/height */
@media (min-width: 768px) {
  .poppy-gap .gb-shape svg { width: 68px; height: 68px; } /* adjust if desired */
}
/* On small screens, you can also shrink it a touch if needed */
@media (max-width: 480px) {
  .poppy-gap .gb-shape svg { width: 52px; height: 52px; }
}


/* =========================================================
   CTA Button – with right-aligned poppy icon (responsive)
   ========================================================= */
.cta-poppy {
  /* --- Core design variables --- */
  --cta-bg: var(--brand-primary-alt, #c1121f);  /* main red from your palette */
  --cta-bg-hover: color-mix(in oklab, var(--cta-bg), black 15%);
  --cta-text: #ffffff;
  --cta-radius: 12px;

  /* Responsive sizing */
  --cta-fs: clamp(1rem, 1.8vw, 1.1rem);
  --cta-pad-y: clamp(.6rem, 1.4vw, .75rem);
  --cta-pad-x: clamp(.9rem, 2vw, 1.1rem);
  --cta-gap: clamp(.65rem, 1.6vw, .85rem);

  /* Icon sizing (larger and responsive) */
  --icon-size: clamp(1.5em, 2.2vw, 1.9em);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cta-gap);
  padding: var(--cta-pad-y) var(--cta-pad-x);
  border-radius: var(--cta-radius);
  background: var(--cta-bg);
  color: var(--cta-text);
  font-weight: 600;
  font-size: var(--cta-fs);
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid color-mix(in oklab, var(--cta-bg), black 10%);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background-color .12s ease,
    border-color .12s ease;
}

/* Hover and focus states */
.cta-poppy:hover {
  background: var(--cta-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  border-color: color-mix(in oklab, var(--cta-bg-hover), black 15%);
}
.cta-poppy:active { transform: translateY(0); }
.cta-poppy:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}

/* Label text */
.cta-poppy .label {
  display: inline-block;
}

/* --- Icon container --- */
.cta-poppy .icon {
  inline-size: var(--icon-size);
  block-size: var(--icon-size);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* SVG inherits size from container */
.cta-poppy .icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Optional smaller variant (for nav bars, etc.) */
.cta-poppy--sm {
  --cta-fs: clamp(.9rem, 1.5vw, 1rem);
  --icon-size: clamp(1.2em, 2vw, 1.4em);
  --cta-pad-y: .5rem;
  --cta-pad-x: .8rem;
  --cta-gap: .5rem;
}

/* Slightly desaturate in dark mode */
@media (prefers-color-scheme: dark) {
  .cta-poppy {
    --cta-bg: #b30f1c;
    --cta-bg-hover: #990d18;
    border-color: color-mix(in oklab, var(--cta-bg), white 10%);
    box-shadow: 0 1px 0 rgba(255,255,255,.04);
  }
}
@media (min-width: 768px) {
  .cta-poppy .icon {
    inline-size: 1.8em;
    block-size: 1.8em;
  }
}
/* =========================================================
   CTA Button – Secondary (white background, red text/icon)
   ========================================================= */
.cta-poppy--secondary {
  --cta-bg: #ffffff;
  --cta-bg-hover: #fff4f4;
  --cta-text: var(--brand-primary-alt, #c1121f);
  --cta-border: var(--brand-primary-alt, #c1121f);

  /* keep same sizing vars as primary */
  --cta-radius: 12px;
  --cta-fs: clamp(1rem, 1.8vw, 1.1rem);
  --cta-pad-y: clamp(.6rem, 1.4vw, .75rem);
  --cta-pad-x: clamp(.9rem, 2vw, 1.1rem);
  --cta-gap: clamp(.65rem, 1.6vw, .85rem);
  --icon-size: clamp(1.5em, 2.2vw, 1.9em);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cta-gap);
  padding: var(--cta-pad-y) var(--cta-pad-x);
  border-radius: var(--cta-radius);
  background: var(--cta-bg);
  color: var(--cta-text);
  font-weight: 600;
  font-size: var(--cta-fs);
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid var(--cta-border);
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background-color .12s ease,
    border-color .12s ease;
}

/* Hover and focus states */
.cta-poppy--secondary:hover {
  background: var(--cta-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

.cta-poppy--secondary:active { transform: translateY(0); }

.cta-poppy--secondary:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--cta-border), black 10%);
  outline-offset: 2px;
}

/* Icon */
.cta-poppy--secondary .icon {
  inline-size: var(--icon-size);
  block-size: var(--icon-size);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cta-poppy--secondary .icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Slightly cool off red in dark mode */
@media (prefers-color-scheme: dark) {
  .cta-poppy--secondary {
    --cta-bg: #1b1b1b;
    --cta-bg-hover: #2a2a2a;
    --cta-text: #fde047;  /* warm gold text in dark mode for contrast */
    --cta-border: #fde047;
  }
}

/* Adjust background image for accessibility and seo */

.image-background{
position: relative;
isolation: isolate;

&img:first-of-type{
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
}
}