/*
Theme Name: Gray Owl Group – Child
Theme URI: https://grayowlgroup.com
Description: Child theme styles for GOG (Astra child). Local fonts, design tokens, typography, Elementor bindings.
Author: Gray Owl Group
Author URI: https://grayowlgroup.com
Template: astra
Version: 2025.10.05
Text Domain: gog-child
*/

/* ========================================
   1) LOCAL FONT-FACE DECLARATIONS
   (uses relative paths from /wp-content/themes/<child>/style.css)
   ======================================== */

/* IBM Plex Sans Variable — WOFF2 Variations */
@font-face {
  font-family: "IBM Plex Sans Variable";
  src: local("IBM Plex Sans"),
       url("../uploads/2025/10/IBM-Plex-Sans-Var-Roman.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+000-5FF; /* Basic Latin + Latin-1 */
}
@font-face {
  font-family: "IBM Plex Sans Variable";
  src: local("IBM Plex Sans Italic"),
       url("../uploads/2025/10/IBM-Plex-Sans-Var-Italic.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
  unicode-range: U+000-5FF;
}

/* IBM Plex Sans Condensed — static WOFF2 */
@font-face {
  font-family: "IBM Plex Sans Condensed";
  src: local("IBM Plex Sans Condensed Regular"),
       url("../uploads/2025/10/IBMPlexSansCondensed-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Condensed";
  src: local("IBM Plex Sans Condensed Italic"),
       url("../uploads/2025/10/IBMPlexSansCondensed-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Condensed";
  src: local("IBM Plex Sans Condensed Medium"),
       url("../uploads/2025/10/IBMPlexSansCondensed-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Condensed";
  src: local("IBM Plex Sans Condensed Medium Italic"),
       url("../uploads/2025/10/IBMPlexSansCondensed-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* IBM Plex Serif — static WOFF2 */
@font-face {
  font-family: "IBM Plex Serif";
  src: local("IBM Plex Serif Regular"),
       url("../uploads/2025/10/IBMPlexSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: local("IBM Plex Serif Italic"),
       url("../uploads/2025/10/IBMPlexSerif-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: local("IBM Plex Serif Medium"),
       url("../uploads/2025/10/IBMPlexSerif-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: local("IBM Plex Serif Medium Italic"),
       url("../uploads/2025/10/IBMPlexSerif-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: local("IBM Plex Serif SemiBold"),
       url("../uploads/2025/10/IBMPlexSerif-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: local("IBM Plex Serif SemiBold Italic"),
       url("../uploads/2025/10/IBMPlexSerif-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* ========================================
   2) DESIGN TOKENS (CSS Variables)
   ======================================== */
:root{
  /* Brand Colors */
  --gog-brand-blue:#030A8C;           /* Primary Blue */
  --gog-accent-periwinkle:#7E84F2;    /* Accent Periwinkle */
  --gog-deep-navy:#023859;            /* Headings / Dark BG */
  --gog-owl-black:#0D0D0D;            /* Body Text */
  --gog-fog-gray:#BDBEBF;             /* Borders / Muted text */
  --gog-soft-fog:#F5F5F5;             /* Subtle background */
  --gog-periwinkle-tint:#E8E9FF;      /* Soft accent tint */
  --gog-white:#FFFFFF;

  /* Fonts */
  --font-sans:"IBM Plex Sans Variable","IBM Plex Sans","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --font-condensed:"IBM Plex Sans Condensed","IBM Plex Sans","Helvetica Neue",Arial,sans-serif;

  /* Type Scale (REM) */
  --fs-h1:3.5rem;      /* ~56px */
  --fs-h2:2.75rem;     /* ~44px */
  --fs-h3:2rem;        /* ~32px */
  --fs-h4:1.5rem;      /* ~24px */
  --fs-h5:1.125rem;    /* ~18px */
  --fs-h6:1rem;        /* ~16px */
  --fs-body:1rem;      /* 16px */
  --fs-body-lead:1.125rem;
  --fs-ui:0.9375rem;   /* 15px */
  --fs-small:0.875rem; /* 14px */

  /* Line Heights (EM) */
  --lh-h1:1.2em; --lh-h2:1.25em; --lh-h3:1.3em; --lh-h4:1.4em; --lh-h5:1.5em; --lh-h6:1.5em;
  --lh-body:1.7em; --lh-lead:1.6em; --lh-ui:1.4em; --lh-small:1.4em;

  /* Letter Spacing (PX) */
  --ls-h1:-0.5px; --ls-h2:-0.25px; --ls-h3:-0.15px;
  --ls-h4:1px; --ls-h5:0.5px; --ls-h6:0px; --ls-ui:0.5px; --ls-small:0.25px;

  /* Borders & Radii */
  --border-color:var(--gog-fog-gray);
  --border-width:1px;
  --radius-sm:4px;
  --radius-md:8px;

  /* Motion */
  --fast:150ms ease;
  --norm:250ms ease;
}

/* ========================================
   3) GLOBAL ELEMENT BASICS
   ======================================== */
html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}

body{
  font-family:var(--font-serif);
  font-weight:400;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--gog-owl-black);
  background-color:var(--gog-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Links */
a{color:var(--gog-brand-blue);text-decoration:none;transition:color var(--fast)}
a:hover,a:focus{color:var(--gog-accent-periwinkle);text-decoration:underline}

/* Borders / Dividers */
hr,.divider{border:0;border-top:var(--border-width) solid var(--border-color);margin:1.5rem 0}

/* ========================================
   4) TYPOGRAPHY — HEADINGS & TEXT
   ======================================== */
h1,h2,h3{font-family:var(--font-sans);color:var(--gog-deep-navy);text-transform:none}
h1{font-weight:600;font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
h2{font-weight:600;font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
h3{font-weight:500;font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}

/* Overline / Section Tag (H4) */
h4{
  font-family:var(--font-condensed);
  font-weight:500;
  font-size:var(--fs-h4);
  line-height:var(--lh-h4);
  letter-spacing:var(--ls-h4);
  text-transform:uppercase;
  color:var(--gog-owl-black);
}

/* Meta label (H5) */
h5{
  font-family:var(--font-condensed);
  font-weight:400;
  font-size:var(--fs-h5);
  line-height:var(--lh-h5);
  letter-spacing:var(--ls-h5);
  text-transform:uppercase; /* remove if you want sentence case */
  color:var(--gog-fog-gray);
}

/* Small heading (H6) */
h6{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:var(--fs-h6);
  line-height:var(--lh-h6);
  letter-spacing:var(--ls-h6);
  color:var(--gog-owl-black);
}

/* Paragraphs */
p{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-body);line-height:var(--lh-body);margin:0 0 1rem}

/* Lead paragraph / intro */
.lead,.intro{font-family:var(--font-serif);font-weight:500;font-size:var(--fs-body-lead);line-height:var(--lh-lead)}

/* Small captions / meta */
.small,.meta,figcaption,.caption,time{
  font-family:var(--font-condensed);
  font-weight:400;
  font-size:var(--fs-small);
  line-height:var(--lh-small);
  letter-spacing:var(--ls-small);
  color:var(--gog-owl-black);
}

/* Utility overline (if not using H4) */
.overline{
  font-family:var(--font-condensed);
  font-weight:500;
  font-size:var(--fs-h5);
  line-height:var(--lh-h4);
  letter-spacing:var(--ls-h4);
  text-transform:uppercase;
  color:var(--gog-owl-black);
}

/* ========================================
   5) NAVIGATION & BUTTONS / FORMS
   ======================================== */
.main-navigation a,.menu a{
  font-family:var(--font-sans);
  font-weight:500;
  font-size:var(--fs-ui);
  line-height:var(--lh-ui);
  letter-spacing:0.25px;
  color:var(--gog-owl-black);
}
.main-navigation a:hover,.menu a:hover{color:var(--gog-accent-periwinkle)}

button,.button,.ast-button,.wp-element-button,input[type="submit"]{
  font-family:var(--font-sans);
  font-weight:500;
  font-size:var(--fs-ui);
  line-height:var(--lh-ui);
  letter-spacing:var(--ls-ui);
  text-transform:uppercase; /* switch to none for softer tone */
  color:var(--gog-white);
  background:var(--gog-brand-blue);
  border:none;border-radius:var(--radius-sm);
  padding:.75rem 1.25rem;
  transition:background var(--fast),color var(--fast),transform var(--fast)
}
button:hover,.button:hover,.ast-button:hover,.wp-element-button:hover,input[type="submit"]:hover{
  background:var(--gog-accent-periwinkle);
  color:var(--gog-white);
  transform:translateY(-1px)
}

/* Form fields */
input[type="text"],input[type="email"],textarea,select{
  border:var(--border-width) solid var(--border-color);
  border-radius:var(--radius-sm);
  padding:.625rem .75rem;
  font-family:var(--font-serif);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  background:var(--gog-white)
}

/* ========================================
   6) SECTIONS / BACKGROUNDS / HELPERS
   ======================================== */
.section--light{background:var(--gog-white);color:var(--gog-owl-black)}
.section--subtle{background:var(--gog-soft-fog);color:var(--gog-owl-black)}
.section--alt{background:var(--gog-periwinkle-tint);color:var(--gog-owl-black)}

.section--dark,.has-dark-bg,footer.site-footer{background:var(--gog-deep-navy);color:var(--gog-white)}
.section--dark h1,.section--dark h2,.section--dark h3,
footer.site-footer h1,footer.site-footer h2,footer.site-footer h3{color:var(--gog-white)}
.section--dark a,footer.site-footer a{color:var(--gog-accent-periwinkle)}
.section--dark a:hover,footer.site-footer a:hover{color:var(--gog-fog-gray)}

/* Cards / panels */
.card,.panel{
  background:var(--gog-white);
  border:var(--border-width) solid var(--border-color);
  border-radius:var(--radius-md);
  padding:1.25rem
}

/* ========================================
   7) ELEMENTOR BINDINGS (ensure inheritance)
   ======================================== */
/* Headings widget */
.elementor-widget-heading .elementor-heading-title{
  font-family:var(--font-sans);
  color:var(--gog-deep-navy);
  text-transform:none;
  line-height:var(--lh-h2);
}
.elementor-widget-heading h1.elementor-heading-title{font-weight:600;font-size:var(--fs-h1);letter-spacing:var(--ls-h1);line-height:var(--lh-h1)}
.elementor-widget-heading h2.elementor-heading-title{font-weight:600;font-size:var(--fs-h2);letter-spacing:var(--ls-h2);line-height:var(--lh-h2)}
.elementor-widget-heading h3.elementor-heading-title{font-weight:500;font-size:var(--fs-h3);letter-spacing:var(--ls-h3);line-height:var(--lh-h3)}
.elementor-widget-heading h4.elementor-heading-title{
  font-family:var(--font-condensed);font-weight:500;font-size:var(--fs-h4);
  letter-spacing:var(--ls-h4);text-transform:uppercase;color:var(--gog-owl-black);line-height:var(--lh-h4)
}
.elementor-widget-heading h5.elementor-heading-title{
  font-family:var(--font-condensed);font-weight:400;font-size:var(--fs-h5);
  letter-spacing:var(--ls-h5);text-transform:uppercase;color:var(--gog-fog-gray);line-height:var(--lh-h5)
}
.elementor-widget-heading h6.elementor-heading-title{
  font-family:var(--font-serif);font-weight:500;font-size:var(--fs-h6);
  letter-spacing:var(--ls-h6);text-transform:none;color:var(--gog-owl-black);line-height:var(--lh-h6)
}

/* Text Editor widget */
.elementor-widget-text-editor,.elementor-widget-text-editor p{
  font-family:var(--font-serif);
  font-weight:400;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--gog-owl-black);
}

/* Buttons */
.elementor-button,.elementor-button .elementor-button-text{
  font-family:var(--font-sans);
  font-weight:500;
  font-size:var(--fs-ui);
  line-height:var(--lh-ui);
  letter-spacing:var(--ls-ui);
  text-transform:uppercase; /* switch to none if preferred */
}
.elementor-button{
  background:var(--gog-brand-blue);
  color:var(--gog-white);
  border-radius:var(--radius-sm);
  transition:background var(--fast),transform var(--fast)
}
.elementor-button:hover{background:var(--gog-accent-periwinkle);transform:translateY(-1px)}

/* Icon List */
.elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-item{align-items:flex-start;margin-bottom:1rem}
.elementor-widget-icon-list .elementor-icon-list-icon i,
.elementor-widget-icon-list .elementor-icon-list-icon svg{color:var(--gog-accent-periwinkle);transition:color var(--fast)}
.elementor-widget-icon-list .elementor-icon-list-item:hover .elementor-icon-list-icon i,
.elementor-widget-icon-list .elementor-icon-list-item:hover .elementor-icon-list-icon svg{color:var(--gog-brand-blue)}
.elementor-widget-icon-list .elementor-icon-list-text{font-family:var(--font-serif);font-size:var(--fs-body);line-height:var(--lh-body)}

/* Links inside Elementor */
.elementor a{color:var(--gog-brand-blue)}
.elementor a:hover{color:var(--gog-accent-periwinkle)}

/* Optional: utility overline class inside Elementor */
.elementor .overline{
  font-family:var(--font-condensed);
  font-weight:500;
  font-size:var(--fs-h5);
  line-height:var(--lh-h4);
  letter-spacing:var(--ls-h4);
  text-transform:uppercase;
  color:var(--gog-owl-black);
}

/* ========================================
   8) MEDIA / RESPONSIVE TWEAKS
   ======================================== */
@media (max-width:1024px){
  h1{font-size:clamp(2.25rem,4vw + 1rem,var(--fs-h1))}
  h2{font-size:clamp(1.875rem,3vw + 0.75rem,var(--fs-h2))}
  h3{font-size:clamp(1.5rem,2vw + 0.5rem,var(--fs-h3))}
  h4{font-size:clamp(1.125rem,1.2vw + 0.5rem,var(--fs-h4))}
}
@media (max-width:768px){
  :root{--fs-h1:2.5rem;--fs-h2:2.125rem;--fs-h3:1.5rem;--fs-h4:1.25rem}
  .lead,.intro{font-size:1.0625rem}
}

/* ========================================
   9) ACCESSIBILITY
   ======================================== */
:focus-visible{outline:2px dashed var(--gog-accent-periwinkle);outline-offset:3px}

/* ========================================
   10) TABLES, QUOTES
   ======================================== */
table{width:100%;border-collapse:collapse;border:var(--border-width) solid var(--border-color)}
th,td{padding:.75rem;border-top:var(--border-width) solid var(--border-color);text-align:left;font-family:var(--font-serif)}
blockquote{
  margin:1.25rem 0;padding:.75rem 1rem;
  border-left:4px solid var(--gog-accent-periwinkle);
  background:var(--gog-periwinkle-tint);
  font-family:var(--font-serif);font-weight:500 /* Serif Medium for quote emphasis */
}

/* ========================================
   Formidable Forms — GOG Styling
   ======================================== */

/* Form wrapper spacing */
.frm_forms .frm_form_fields {
  margin: 1rem 0 2rem;
}

/* Labels */
.frm_forms .frm_primary_label,
.frm_forms .frm_section_heading h3 {
  font-family: var(--font-condensed);
  font-weight: 500;
  font-size: 1rem;              /* H6 scale */
  line-height: var(--lh-h6);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gog-owl-black);
  margin-bottom: .375rem;
}
.frm_required {
  color: var(--gog-accent-periwinkle);
}

/* Descriptions / help text */
.frm_forms .frm_description,
.frm_forms .frm_opt_container .frm_inline_label {
  font-family: var(--font-serif);
  font-size: 0.875rem;          /* small */
  line-height: var(--lh-small);
  color: var(--gog-owl-black);
  opacity: .85;
}

/* Inputs, selects, textareas */
.frm_forms input[type="text"],
.frm_forms input[type="email"],
.frm_forms input[type="url"],
.frm_forms input[type="tel"],
.frm_forms input[type="number"],
.frm_forms input[type="password"],
.frm_forms input[type="search"],
.frm_forms select,
.frm_forms textarea {
  width: 100%;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: .625rem .75rem;
  background: var(--gog-white);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--gog-owl-black);
  transition: border-color var(--fast), box-shadow var(--fast);
}

/* Focus state */
.frm_forms input:focus,
.frm_forms select:focus,
.frm_forms textarea:focus {
  outline: none;
  border-color: var(--gog-accent-periwinkle);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gog-accent-periwinkle) 35%, transparent);
}

/* Placeholder */
.frm_forms ::placeholder {
  color: var(--gog-owl-black);
  opacity: .55;
}

/* Checkboxes & radios */
.frm_forms .frm_radio input[type="radio"],
.frm_forms .frm_checkbox input[type="checkbox"] {
  accent-color: var(--gog-accent-periwinkle);
}
.frm_forms .frm_radio label,
.frm_forms .frm_checkbox label {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.5em;
  color: var(--gog-owl-black);
}

/* Submit + nav buttons */
.frm_forms .frm_submit button,
.frm_forms .frm_submit input[type="submit"],
.frm_prev_page, .frm_next_page {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  color: var(--gog-white);
  background: var(--gog-brand-blue);
  border: none;
  border-radius: var(--radius-sm);
  padding: .75rem 1.25rem;
  transition: background var(--fast), transform var(--fast);
}
.frm_forms .frm_submit button:hover,
.frm_forms .frm_submit input[type="submit"]:hover,
.frm_prev_page:hover, .frm_next_page:hover {
  background: var(--gog-accent-periwinkle);
  transform: translateY(-1px);
}

/* Success + error messages */
.frm_message, .frm_success_style {
  border: 1px solid color-mix(in srgb, var(--gog-accent-periwinkle) 45%, white);
  background: var(--gog-periwinkle-tint);
  color: var(--gog-owl-black);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  font-family: var(--font-serif);
  font-weight: 500; /* Serif Medium for emphasis */
}
.frm_error_style, .frm_error {
  border: 1px solid #E06666;
  background: #FDECEC;
  color: #7A1F1F;
  border-radius: var(--radius-md);
  padding: .75rem 1rem;
  font-family: var(--font-serif);
}
.frm_error input, .frm_error select, .frm_error textarea {
  border-color: #E06666 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #E06666 20%, transparent);
}

/* Field spacing */
.frm_forms .frm_form_field {
  margin-bottom: 1rem;
}
.frm_forms .frm_form_field:last-child {
  margin-bottom: 0;
}

/* File upload & date fields (generic polish) */
.frm_dropzone,
.frm_forms input[type="file"] {
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-sm);
  padding: .75rem;
  background: var(--gog-soft-fog);
}
.frm_forms input[type="date"],
.frm_forms input[type="time"],
.frm_forms input[type="datetime-local"] {
  font-family: var(--font-serif);
}

/* Multi-step progress (bar + current step) */
.frm_page_bar, .frm_progress_line {
  background: color-mix(in srgb, var(--gog-accent-periwinkle) 30%, var(--gog-soft-fog));
  border-radius: 999px;
  height: 8px;
}
.frm_progress_active, .frm_current_page {
  background: var(--gog-accent-periwinkle) !important;
}

/* Consent / GDPR */
.frm_forms .frm_verify {
  font-family: var(--font-serif);
  font-size: .875rem;
  color: var(--gog-owl-black);
}

/* Dark section variant */
.section--dark .frm_forms label,
.section--dark .frm_forms .frm_primary_label,
.section--dark .frm_forms .frm_description {
  color: #FFFFFF;
  opacity: .9;
}
.section--dark .frm_forms input,
.section--dark .frm_forms select,
.section--dark .frm_forms textarea {
  background: rgba(255,255,255,.06);
  color: #FFFFFF;
  border-color: color-mix(in srgb, #FFFFFF 30%, transparent);
}
.section--dark .frm_forms ::placeholder { color: #FFFFFF; opacity: .6; }
.section--dark .frm_forms .frm_submit button,
.section--dark .frm_forms .frm_submit input[type="submit"] {
  background: var(--gog-accent-periwinkle);
}
.section--dark .frm_forms .frm_submit button:hover,
.section--dark .frm_forms .frm_submit input[type="submit"]:hover {
  background: var(--gog-fog-gray);
  color: var(--gog-owl-black);
}

/* ========================================
   END
   ======================================== */