/*
Theme Name: B2 Child
Description: Child theme for Hello Elementor.
Author: Hayden Stapleton
Author URI: https://embarkagency.com.au/
Template: hello-elementor
Version: 1.0.1
Text Domain: b2-child
*/


/* Font Faces — Season Sans (licensed: Regular 400, Bold 750)
   Medium/SemiBold aren't licensed; the design's 550/650 weights map through
   --fw-medium / --fw-semibold below. Trial build kept at git tag backup/trial-fonts.
   "Season Sans-TRIAL" is aliased to the licensed files so any Elementor
   typography still saved under the old family name keeps resolving.
--------------------------------------------- */
@font-face {
    font-family: "Season Sans";
    src: url("fonts/SeasonSans-Regular.woff2") format("woff2"),
         url("fonts/SeasonSans-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Season Sans";
    src: url("fonts/SeasonSans-Bold.woff2") format("woff2"),
         url("fonts/SeasonSans-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Season Sans-TRIAL";
    src: url("fonts/SeasonSans-Regular.woff2") format("woff2"),
         url("fonts/SeasonSans-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Season Sans-TRIAL";
    src: url("fonts/SeasonSans-Bold.woff2") format("woff2"),
         url("fonts/SeasonSans-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* Global Font Styles
--------------------------------------------- */

/* Desktop font sizes — Figma: B2 STRUCTURAL / Homepage V4 */
:root {
    /* Display — hero style (134px @ 1920, fluid via 7vw, min for mobile) */
    --heading-display:    clamp(3rem, 7vw, 8.4rem); /* 134 */
    --heading-h1:         4.1875rem; /* 67 */
    --heading-h2:         2.6875rem; /* 43 */
    --heading-h3:         2rem;      /* 32 */
    --heading-h4:         1.5rem;    /* 24 */
    --heading-h5:         1.375rem;  /* 22 */
    --heading-h6:         1.25rem;   /* 20 — no H6 in Figma, interpolated below H5 */

    --body-body-lg:       1.25rem;   /* 20 */
    --body-body-md:       1.125rem;  /* 18 — design's default body size */
    --body-body-sm:       1.125rem;  /* 18 — Figma Sm Regular matches Md size, only line-height differs; confirm */
    --body-body-xsm:      0.75rem;   /* 12 — Footnote */

    --component-caption:  0.75rem;   /* 12 — Footnote */
    --component-button-buttondefault: 1rem; /* 16 */

    /* Line heights — unitless, per Figma */
    --line-display:       1.1;
    --line-h1:            var(--line-display);
    --line-h2:            1.2;
    --line-h3:            1.3;
    --line-h4:            1.4;
    --line-h5:            1.4;
    --line-h6:            1.4;
    --line-body-lg:       1.5;
    --line-body-md:       1.5;
    --line-body-sm:       1.4;
    --line-caption:       1.5;
    --line-button:        1;         /* 100% */

    /* Letter spacing */
    --tracking-display:   0.01em;    /* 1% — hero display only */
    --tracking-heading:   0.02em;    /* 2% — H2–H6 */
    --tracking-body:      0.02em;    /* 2% */
    --tracking-button:    0.0625em;  /* 1px @ 16 */
}


/* Mobile font sizes */
@media all and (max-width:767px){
	:root {
		--heading-h1:         2.8rem;
	}
}



/* Colour Variables
--------------------------------------------- */
:root {
    --black:          #000000;
    --white:          #ffffff;

    /* Brand / Navy */
    --navy-n400:      #00192f; /* Navy/N400 — deepest, button text */
    --navy-n300:      #002343; /* Navy/N300 — primary brand, dark sections */
    --navy-n100:      #6b7f92; /* Navy/N100 — secondary body copy, meta */
    --navy-n75:       #96a5b2; /* Navy/N75  — rules, muted list items */

    /* Neutrals / Concrete Grey */
    --concrete-c300:  #ececec; /* Concrete Grey/C300 */
    --concrete-c75:   #f7f7f7; /* Concrete Grey/C75 */

    /* Accent */
    --orange-o300:    #ee4c01; /* Orange/O300 */

    /* Semantic aliases */
    --accent:         var(--orange-o300);
    --text-heading:   var(--navy-n300);
    --text-body:      var(--navy-n300);
    --text-inverse:   var(--white);
    --text-accent:    var(--orange-o300); /* headings + nav links on navy */
    --bg-default:     var(--white);
    --bg-alt:         var(--concrete-c75);
    --bg-inverse:     var(--navy-n300);
    --border-subtle:  var(--concrete-c300);

    /* Buttons */
    --button-bg:          var(--concrete-c300);
    --button-text:        var(--navy-n400);
    --button-bg-accent:   var(--orange-o300);
    --button-text-accent: var(--navy-n400);

    /* Global Fonts — licensed Season Sans */
    --bodyFont:   "Season Sans", "Helvetica Neue", Arial, sans-serif;
    --titleFont:  "Season Sans", "Helvetica Neue", Arial, sans-serif;

    /* Font weights — design calls for Medium 550 / SemiBold 650, only
       Regular + Bold are licensed. To restore once licensed: add the
       @font-face rules and set these back to 500 / 600. */
    --fw-medium:   400; /* design: Medium 550 */
    --fw-semibold: 700; /* design: SemiBold 650 */
}


/* Spacing Variables
--------------------------------------------- */
:root {
    --base-size: 4px;

    --size-0\.5: calc(var(--base-size) * 0.5);
    --size-1:  calc(var(--base-size) * 1);   /* 4 */
    --size-2:  calc(var(--base-size) * 2);   /* 8 */
    --size-3:  calc(var(--base-size) * 3);   /* 12 */
    --size-4:  calc(var(--base-size) * 4);   /* 16 */
    --size-5:  calc(var(--base-size) * 5);   /* 20 */
    --size-6:  calc(var(--base-size) * 6);   /* 24 */
    --size-8:  calc(var(--base-size) * 8);   /* 32 */
    --size-10: calc(var(--base-size) * 10);  /* 40 */
    --size-12: calc(var(--base-size) * 12);  /* 48 */
    --size-14: calc(var(--base-size) * 14);  /* 56 */
    --size-16: calc(var(--base-size) * 16);  /* 64 */
    --size-18: calc(var(--base-size) * 18);  /* 72 */
    --size-20: calc(var(--base-size) * 20);  /* 80 */
    --size-24: calc(var(--base-size) * 24);  /* 96 */
    --size-32: calc(var(--base-size) * 32);  /* 128 */
    --size-48: calc(var(--base-size) * 48);  /* 192 */
    --size-80: calc(var(--base-size) * 80);  /* 320 */
}


/* Global Configuration — DESKTOP
--------------------------------------------- */
:root {
    --page-width: 1284px;

    /* Section Padding */
    --section-padding-smaller: var(--size-12); /* 48 */
    --section-padding:         var(--size-32); /* 128  — sp-v-default */
    --section-padding-larger:  var(--size-48); /* 192  — sp-y-lrg */
    --section-padding-sides:   var(--size-80); /* 320  — sp-h-default */

    /* Component Padding */
    --cp-3xs: var(--size-1);   /* 4 */
    --cp-2xs: var(--size-2);   /* 8 */
    --cp-xs:  var(--size-3);   /* 12 */
    --cp-s:   var(--size-4);   /* 16 */
    --cp-m:   var(--size-5);   /* 20 */
    --cp-l:   var(--size-8);   /* 32 */
    --cp-xl:  var(--size-12);  /* 48 */
    --cp-2xl: var(--size-16);  /* 64 */
    --cp-3xl: var(--size-24);  /* 96 */

    /* Column gaps */
    --column-sm: var(--size-4);  /* 16 */
    --column-md: var(--size-5);  /* 20 */
    --column-lg: var(--size-12); /* 48 */

    /* Radius — design is squared throughout; scale kept for edge cases */
    --radius-s:    4px;
    --radius-m:    8px;
    --radius-l:    12px;
    --radius-full: 999px;

    /* Button */
    --button-height-default:  60px;
    --button-padding-default: var(--cp-l); /* 32 — Figma button side padding */
    --button-radius: 0;
}

@media all and (max-width: 1750px) {
    :root { --section-padding-sides: var(--size-24); } /* 96 */
}

/* TABLET */
@media all and (max-width: 1440px) {
    :root {
        --page-width: 1024px;

        --section-padding-smaller: var(--size-8);  /* 32 */
        --section-padding:         var(--size-24); /* 96 */
        --section-padding-larger:  var(--size-32); /* 128 */
        --section-padding-sides:   var(--size-24); /* 96 */

        --cp-l:   var(--size-5);  /* 20 */
        --cp-xl:  var(--size-8);  /* 32 */
        --cp-2xl: var(--size-12); /* 48 */
        --cp-3xl: var(--size-16); /* 64 */

        --column-lg: var(--size-8); /* 32 */
    }
}

@media (max-width: 1200px) {
    :root { --section-padding-sides: var(--size-16); }
}

/* MOBILE */
@media all and (max-width: 767px) {
    :root {
        --page-width: 375px;

        --section-padding-smaller: var(--size-8);  /* 32 */
        --section-padding:         var(--size-16); /* 64 */
        --section-padding-larger:  var(--size-24); /* 96 */
        --section-padding-sides:   var(--size-6);  /* 24 */

        --cp-xl:  var(--size-6);  /* 24 */
        --cp-2xl: var(--size-8);  /* 32 */
        --cp-3xl: var(--size-12); /* 48 */
    }
}


/* Section Padding Utility Classes
--------------------------------------------- */
.elementor .section-padding-small  { padding: var(--section-padding-smaller) var(--section-padding-sides); padding-inline-start: var(--section-padding-sides); padding-inline-end: var(--section-padding-sides); }
.elementor .section-padding        { padding: var(--section-padding)         var(--section-padding-sides); padding-inline-start: var(--section-padding-sides); padding-inline-end: var(--section-padding-sides); }
.elementor .section-padding-large  { padding: var(--section-padding-larger)  var(--section-padding-sides); padding-inline-start: var(--section-padding-sides); padding-inline-end: var(--section-padding-sides); }

.elementor .section-padding.top,
.elementor .section-padding-small.top,
.elementor .section-padding-large.top        { padding-bottom: 0; }
.elementor .section-padding.bottom,
.elementor .section-padding-small.bottom,
.elementor .section-padding-large.bottom     { padding-top: 0; }
.elementor .section-padding.sides-only,
.elementor .section-padding-small.sides-only,
.elementor .section-padding-large.sides-only { padding-top: 0; padding-bottom: 0; }

:root {
    --header-offset: 156px; /* 60px header bar + 2 × 48 (cp-xl) padding — verify against built header */
}

@media (max-width: 1279px) {
    :root {
        --header-offset: 89px; /* TBC — no tablet/mobile header in mockup yet */
    }
}

body .header-offset {
    margin-top: var(--header-offset);
}

body .elementor-heading-title {
    line-height: inherit;
}
body [type=button]:focus, body [type=submit]:focus, body button:focus {
    background-color: inherit;
    color: inherit;
}

.elementor-widget-text-editor p,
h3.e-n-accordion-item-title-text,
.elementor-widget-heading p,
.b2ps__desc p {
	text-wrap: pretty;
}
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.b2ps .b2ps__title,
.b2vs .b2vs__title {
	text-wrap: balance;
}

/* Typography Utility Classes — Elementor-compatible
--------------------------------------------- */

/* Display and H1 share the same style (hero) */
.text-display, .text-h1, body h1,
.elementor h1.elementor-heading-title,
.elementor .text-h1,
.elementor .text-display {
    font-family:    var(--titleFont);
    font-size:      var(--heading-display);
    font-weight:    400;
    line-height:    var(--line-display);
    letter-spacing: var(--tracking-display);
}

.text-h1, body h1,
.elementor h1.elementor-heading-title,
.elementor .text-h1 {
	font-family:    var(--titleFont);
    font-size:      var(--heading-h1);
    font-weight:    400;
    line-height:    var(--line-display);
    letter-spacing: var(--tracking-display);
}

.text-h2, body h2,
.elementor h2.elementor-heading-title,
.elementor .text-h2 {
    font-family:    var(--titleFont);
    font-size:      var(--heading-h2);
    font-weight:    400;
    line-height:    var(--line-h2);
    letter-spacing: var(--tracking-heading);
}

.text-h3, body h3,
.elementor h3.elementor-heading-title,
.elementor .text-h3 {
    font-family:    var(--titleFont);
    font-size:      var(--heading-h3);
    font-weight:    400;
    line-height:    var(--line-h3);
    letter-spacing: var(--tracking-heading);
}

/* All headings are Regular (400) per Figma Desktop/H2–H5 */
.text-h4, body h4,
.elementor h4.elementor-heading-title,
.elementor .text-h4 {
    font-family:    var(--titleFont);
    font-size:      var(--heading-h4);
    font-weight:    400;
    line-height:    var(--line-h4);
    letter-spacing: var(--tracking-heading);
}

.text-h5, body h5,
.elementor h5.elementor-heading-title,
.elementor .text-h5 {
    font-family:    var(--titleFont);
    font-size:      var(--heading-h5);
    font-weight:    400;
    line-height:    var(--line-h5);
    letter-spacing: var(--tracking-heading);
}

.text-h6, body h6,
.elementor h6.elementor-heading-title,
.elementor .text-h6 {
    font-family:    var(--titleFont);
    font-size:      var(--heading-h6);
    font-weight:    400;
    line-height:    var(--line-h6);
    letter-spacing: var(--tracking-heading);
}

.text-body-large,
.elementor .text-body-large {
    font-family:    var(--bodyFont);
    font-size:      var(--body-body-lg);
    font-weight:    400;
    line-height:    var(--line-body-lg);
    letter-spacing: var(--tracking-body);
}

.text-body-medium,
.elementor .text-body-medium {
    font-family:    var(--bodyFont);
    font-size:      var(--body-body-md);
    font-weight:    400;
    line-height:    var(--line-body-md);
    letter-spacing: var(--tracking-body);
}

.text-body-small,
.elementor .text-body-small {
    font-family:    var(--bodyFont);
    font-size:      var(--body-body-sm);
    font-weight:    400;
    line-height:    var(--line-body-sm);
    letter-spacing: var(--tracking-body);
}

/* Footnote — copyright line etc. No uppercase tag style in this mockup */
.text-caption, .text-tag,
.elementor .text-caption,
.elementor .text-tag {
    font-family:    var(--bodyFont);
    font-size:      var(--component-caption);
    font-weight:    400;
    line-height:    var(--line-caption);
    letter-spacing: var(--tracking-body);
}

/* Button type — also used for "EXPLORE →" text links */
.text-button, .elementor-button,
.elementor .text-button,
.elementor [type="submit"],
.elementor [type="button"] {
    font-family:    var(--bodyFont);
    font-size:      var(--component-button-buttondefault);
    font-weight:    var(--fw-semibold); /* Figma: SemiBold 650 */
    line-height:    var(--line-button);
    letter-spacing: var(--tracking-button);
    text-transform: uppercase;
}

/* Header nav links — body size, Medium */
.text-menu, .elementor .text-menu {
    font-family:    var(--bodyFont);
    font-size:      var(--body-body-md);
    font-weight:    var(--fw-medium); /* Figma: Medium 550 */
    line-height:    var(--line-body-md);
    letter-spacing: var(--tracking-body);
}


/* Base Elements
--------------------------------------------- */
html { font-size: 16px; }

/* html body outranks Hello Elementor's reset.css `body` rule regardless of
   load order — reset.css re-sets family/size/weight/line-height/color/bg */
html body {
    font-family:    var(--bodyFont);
    font-size:      var(--body-body-md);
    font-weight:    400;
    line-height:    var(--line-body-md);
    letter-spacing: var(--tracking-body);
    color:          var(--text-body);
    background:     var(--bg-default);
}

/* Form elements don't inherit the body font by default */
button, input, select, textarea { font-family: inherit; }

/* Point the Elementor kit / Hello Elementor global font slots at Season Sans
   so widget typography defaults resolve to it too.
   body[class*=] outranks the kit's .elementor-kit-N definitions */
body,
body[class*="elementor-kit"] {
    --e-global-typography-primary-font-family:   "Season Sans";
    --e-global-typography-secondary-font-family: "Season Sans";
    --e-global-typography-text-font-family:      "Season Sans";
    --e-global-typography-accent-font-family:    "Season Sans";
}

a { color: inherit; }

/* "Bold" body copy is Medium in this design (Figma 550) —
   body prefix beats reset.css's `b, strong { font-weight: bolder }` */
body b, body strong { font-weight: var(--fw-medium); }

.elementor-widget-text-editor p:last-of-type {
    margin-bottom: 0;
}


/* Button Customisation
--------------------------------------------- */
.elementor .elementor-button,
.elementor [type="submit"],
.elementor [type="button"] {
    background-color: var(--button-bg);
    color:            var(--button-text);
    min-height:       var(--button-height-default);
    padding-block:    0;
    padding-inline:   var(--button-padding-default);
    border-radius:    var(--button-radius);
    display: inline-flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

/* Orange variant — CTA sections / on navy */
.elementor .button-accent .elementor-button,
.elementor .elementor-button.button-accent {
    background-color: var(--button-bg-accent);
    color:            var(--button-text-accent);
}
button.b2mm-close {
    color: #fff !important;
}


/* Image Cutouts
--------------------------------------------- */
.cutout:before {
    content: '';
    display: inline-block;
    position: absolute;
    aspect-ratio: 188 / 60;
    background-color: var(--concrete-c75);
    z-index: 1;
    width: 100%; 
    height: auto;
    max-width: 188px;
}
.cutout.top:before {
    top: 0;
}
.cutout.bottom:before {
    bottom: 0;
}
.cutout.left:before {
    left: 0;
}
.cutout.right:before {
    right: 0;
}

@media all and (max-width:767px){
    .cutout:before {
        max-width: 128px;
    }
}