@charset "UTF-8";
/*!
    Main Stylesheet Manifest

    This file imports all SCSS partials in the correct order.
    DO NOT add styles here — use the appropriate partial instead.

    Compile: sass --watch css:css

    Import order:
        1. Fonts & Variables (design tokens)
        2. Helpers (mixins & utilities)
        3. Utility classes (colors, typography)
        4. Base element styles
        5. Components (reusable patterns)
        6. Sections (ACF flexible content)
        7. Page-specific overrides

    @author development@bronte.co.nz
*/
/*
    Font Face Declarations

    Define custom web fonts here using @font-face.
    Font files should be stored in /assets/fonts/ or loaded from CDN.

    After adding fonts, update $font-family-primary or $font-family-secondary
    in _variables.scss to use them.

    Example:
        @font-face {
            font-family: 'CustomFont';
            src: url('../assets/fonts/custom.woff2') format('woff2'),
                 url('../assets/fonts/custom.woff') format('woff');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
*/
/*
    Design Tokens (Variables)

    Central source of truth for all design values.
    ALWAYS check here before adding new values elsewhere.

    How to use:
        1. Import in your partial: @use 'variables' as *;
        2. Use variables: color: $color-primary;

    Naming conventions:
        $color-{name}      — colours
        $spacing-{size}    — spacing (xs, sm, md, lg, xl, 2xl, 3xl, 4xl)
        $font-size-{size}  — font sizes
        $font-weight-{name} — font weights
        $screen-{size}     — breakpoints
*/
/*
    Helper Utilities

    Layout, positioning, and display utilities.
    For typography utilities, see _typography.scss.
    For colour utilities, see _colors.scss.

    Usage:
        <div class="pos-relative">
            <img class="bg-image" src="..." alt="...">
            <div class="z-above">Content above image</div>
        </div>
*/
.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.pos-relative {
  position: relative;
}

.pos-absolute {
  position: absolute;
}

.z-below {
  z-index: 5;
}

.z-base {
  z-index: 10;
}

.z-above {
  z-index: 15;
}

.mb-0 {
  margin-bottom: 0;
}

.last-child-mb-0 > :last-child {
  margin-bottom: 0;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/*
    Colour Utility Classes

    Background and text colour utilities generated from $colors map.
    All colours are defined in _variables.scss.

    Usage:
        <div class="bg-primary text-white">Primary background</div>
        <p class="text-muted">Secondary text</p>

    Available classes:
        .bg-{color}   — background colour
        .text-{color} — text colour

    Where {color} is: primary, secondary, dark, light, white, black, muted
*/
.bg-primary {
  background-color: #30b55e;
}

.text-primary {
  color: #30b55e;
}

.bg-secondary {
  background-color: #959a9e;
}

.text-secondary {
  color: #959a9e;
}

.bg-dark {
  background-color: #111111;
}

.text-dark {
  color: #111111;
}

.bg-light {
  background-color: #f6f9f9;
}

.text-light {
  color: #f6f9f9;
}

.bg-white {
  background-color: #fff;
}

.text-white {
  color: #fff;
}

.bg-black {
  background-color: #000;
}

.text-black {
  color: #000;
}

.bg-muted {
  background-color: #959a9e;
}

.text-muted {
  color: #959a9e;
}

/*
    Typography Utility Classes

    Apply these classes directly in HTML to control text appearance.
    All values come from _variables.scss for consistency.

    Usage:
        <p class="text-lg font-bold">Large bold text</p>
        <span class="text-muted text-sm">Small muted caption</span>
*/
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-xs {
  font-size: 12px;
}

.text-sm {
  font-size: 14px;
}

.text-base {
  font-size: 16px;
}

.text-lg {
  font-size: 18px;
}

.text-xl {
  font-size: 24px;
}

.text-2xl {
  font-size: 32px;
}

.text-3xl {
  font-size: 48px;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.leading-tight {
  line-height: 1.2;
}

.leading-base {
  line-height: 1.5;
}

.leading-loose {
  line-height: 1.8;
}

.font-primary {
  font-family: Helvetica, Arial, sans-serif;
}

.font-secondary {
  font-family: Georgia, serif;
}

/*
    Button Styles

    Base button styles and variants.
    Applied to .btn class, <button>, and submit inputs.

    Usage:
        <a href="#" class="btn">Default button</a>
        <button class="btn btn-primary">Primary button</button>

    Add variants below as needed:
        .btn-primary  — primary colour button
        .btn-outline  — outlined button
        .btn-lg       — large button
*/
.btn,
button,
input[type=submit] {
  -webkit-appearance: none;
  border-radius: 0;
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  font-family: Helvetica, Arial, sans-serif;
  padding: 8px 16px;
  line-height: 1.5;
  cursor: pointer;
  transition: 0.2s all;
  border: 0;
  text-transform: uppercase;
  text-align: center;
}
.btn:focus,
button:focus,
input[type=submit]:focus {
  outline: none;
}

/*
    Navigation Menu Styles

    Styles for WordPress menus registered in functions/setup.php.
    Menu locations: header, footer, mobile.

    Structure:
        <nav>
            <ul class="menu menu-main">
                <li><a href="#">Link</a></li>
            </ul>
        </nav>

    Modifiers:
        .menu-main   — header navigation
        .menu-footer — footer navigation
*/
.menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.menu-main li {
  margin-left: 32px;
}
.menu-main a {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.menu-footer {
  flex-direction: column;
}
.menu-footer li {
  margin-bottom: 8px;
  position: relative;
}
.menu-footer a {
  line-height: 1.428;
  font-weight: 400;
}

/*
    Base Element Styles

    Global styles for HTML elements (body, a, img, headings, etc.).
    These apply site-wide without needing classes.

    For utility classes, see:
        _helpers.scss    — layout utilities
        _typography.scss — text utilities
        _colors.scss     — colour utilities
*/
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--wp-admin--admin-bar--height); /**
* @link https://make.wordpress.org/core/2022/01/07/theme-focused-changes-and-filters-in-wordpress-5-9/#adjusting-for-fixed-header-navigation
*/
}

html,
body {
  min-height: 100vh;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color: #111111;
  display: flex;
  flex-direction: column;
  margin: 0;
}

a {
  transition: all 0.2s ease-in-out;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}

main {
  flex: 1;
}

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

p img {
  display: inline-block;
}

.text > :first-child {
  margin-top: 0;
}
.text > :last-child {
  margin-bottom: 0;
}
.text ol,
.text ul {
  line-height: inherit;
  padding-left: 20px;
}
.text li:last-child {
  margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5 {
  margin-top: 0;
}

@media (min-width: 768px) {
  .alignleft,
  img.alignleft {
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
  }
}

@media (min-width: 768px) {
  .alignright,
  img.alignright {
    float: right;
    margin-left: 1em;
    margin-bottom: 1em;
  }
}

.aligncenter,
img.aligncenter {
  margin: 1em auto;
}

/*
    Site Header Styles

    Includes mobile menu, hamburger toggle, and header layout.
    The header element itself is in header.php.

    Key classes:
        .side-menu    — slide-out mobile menu panel
        .menu-opener  — hamburger icon (animates to X when open)
        .opened       — body class when menu is open
*/
.side-menu {
  position: fixed;
  pointer-events: none;
  top: 84px;
  right: 0;
  bottom: 0;
  z-index: 750;
  transition: all ease-in-out 0.4s;
  width: 100vw;
}
@media (min-width: 576px) {
  .side-menu {
    width: 410px;
  }
}
.side-menu .inner {
  background: #fff;
  height: calc(100vh - 72px);
  padding: 30px 12px;
  overflow: auto;
}

.opened .side-menu {
  transform: translateX(0) !important;
  pointer-events: all;
}

.menu-opener {
  z-index: 50;
  cursor: pointer;
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid #fff;
  margin-left: auto;
}
.menu-opener:before, .menu-opener:after {
  content: "";
  backface-visibility: hidden;
  transition: all 0.4s;
  background: #fff;
  height: 1px;
  left: 9px;
  right: 9px;
  top: 13px;
  position: absolute;
}
.menu-opener:before {
  box-shadow: 0 13px 0 0 #fff;
}
.menu-opener:after {
  top: 19px;
}
.opened .menu-opener:before {
  box-shadow: 0 0 0 0 transparent;
  transform: rotate(225deg);
  top: 19px;
}
.opened .menu-opener:after {
  transform: rotate(315deg);
  top: 19px;
}

/*
    Site Footer Styles

    Styles for the site footer in footer.php.
    Add footer layout, widgets, and copyright styling here.
*/
/**
 * Gravity Forms - Orbital Theme Overrides
 *
 * Styles for GF 2.9+ Orbital theme.
 * Uses CSS custom properties to override Orbital defaults.
 *
 * Structure:
 *   1. CSS Custom Properties (theme-wide overrides)
 *   2. Direct Style Overrides (elements Orbital doesn't fully control)
 *   3. Validation & Error States
 *   4. Honeypot Field (spam protection)
 */
.gform_wrapper.gform-theme--orbital[data-form-index] {
  --gf-color-primary: #30b55e;
  --gf-color-primary-rgb: 48, 181, 94;
  --gf-ctrl-label-font-family-primary: Helvetica, Arial, sans-serif;
  --gf-ctrl-label-font-size-primary: 14px;
  --gf-ctrl-label-font-weight-primary: 600;
  --gf-ctrl-label-color-primary: #111111;
  --gf-ctrl-font-family: Helvetica, Arial, sans-serif;
  --gf-ctrl-font-size: 16px;
  --gf-ctrl-line-height: 1.5;
  --gf-ctrl-color: #111111;
  --gf-ctrl-color-placeholder: #959a9e;
  --gf-ctrl-bg-color: #fff;
  --gf-ctrl-border-color: #e0e0e0;
  --gf-ctrl-border-width: 1px;
  --gf-ctrl-border-radius: 4px;
  --gf-ctrl-padding-x: 16px;
  --gf-ctrl-padding-y: 12px;
  --gf-ctrl-border-color-focus: #30b55e;
  --gf-ctrl-focus-ring-color: rgba(48, 181, 94, 0.2);
  --gf-ctrl-select-color: #111111;
  --gf-ctrl-choice-label-color: #111111;
  --gf-ctrl-btn-font-family: Helvetica, Arial, sans-serif;
  --gf-ctrl-btn-font-size: 16px;
  --gf-ctrl-btn-font-weight: 600;
  --gf-ctrl-btn-color: #fff;
  --gf-ctrl-btn-color-hover: #fff;
  --gf-ctrl-btn-bg-color: #30b55e;
  --gf-ctrl-btn-bg-color-hover: #2a9e52;
  --gf-ctrl-btn-border-color: #30b55e;
  --gf-ctrl-btn-border-color-hover: #2a9e52;
  --gf-ctrl-btn-border-radius: 4px;
  --gf-ctrl-btn-padding-x: 24px;
  --gf-ctrl-btn-padding-y: 12px;
  --gf-field-pg-row-gap: 24px;
  --gf-form-gap-y: 24px;
}

.gform_wrapper.gform-theme--orbital {
  font-family: Helvetica, Arial, sans-serif;
}
.gform_wrapper.gform-theme--orbital .gform_required_legend {
  display: none;
}
.gform_wrapper.gform-theme--orbital .gfield_required {
  color: inherit;
}
.gform_wrapper.gform-theme--orbital textarea {
  min-height: 120px;
  resize: vertical;
}
.gform_wrapper.gform-theme--orbital select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23959a9e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 10px;
  padding-right: 48px;
}
.gform_wrapper.gform-theme--orbital .gform_footer,
.gform_wrapper.gform-theme--orbital .gform_page_footer {
  margin-top: 24px;
  padding: 0;
}

.gform_wrapper.gform-theme--orbital .gfield_validation_message,
.gform_wrapper.gform-theme--orbital .validation_message {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #dc3545;
}
.gform_wrapper.gform-theme--orbital .gfield_error input,
.gform_wrapper.gform-theme--orbital .gfield_error select,
.gform_wrapper.gform-theme--orbital .gfield_error textarea {
  border-color: #dc3545;
}
.gform_wrapper.gform-theme--orbital .gform_submission_error {
  margin-bottom: 24px;
  padding: 16px;
  font-size: 14px;
  color: #dc3545;
  background-color: rgba(220, 53, 69, 0.1);
  border-radius: 4px;
}
.gform_wrapper.gform-theme--orbital .gform_confirmation_message {
  padding: 24px;
  font-size: 16px;
  line-height: 1.5;
  color: #28a745;
  background-color: rgba(40, 167, 69, 0.1);
  border-radius: 4px;
}

.gform_wrapper .gform_validation_container {
  display: none !important;
  position: absolute !important;
  left: -9999px !important;
}

.hidden_label .gfield_label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
    Components Manifest

    Import reusable UI components here (alphabetical order).
    Components are standalone patterns used across multiple sections.

    Examples: blog-card, team-card, testimonial-card, accordion

    Creating a new component:
        1. Create css/components/_my-component.scss
        2. Add @use 'my-component'; below
        3. Use .my-component class in templates

    Component structure:
        .my-component {
            .image { }
            .title { }
            .content { }
        }
*/
/*
    Sections Manifest

    Import ACF Flexible Content section styles here (alphabetical order).
    Each section corresponds to a layout in the Sections field group.

    Creating a new section:
        1. Create css/sections/_my-section.scss
        2. Add @use 'my-section'; below
        3. PHP template: template-parts/sections/s-my-section.php

    Section structure:
        .section-my-section {
            padding: $section-spacing-y 0;

            .title { }
            .content { }
        }
*/
/*
    Homepage-Specific Styles

    Styles that ONLY apply to the homepage.
    Use sparingly — prefer reusable section styles instead.

    Target with body.home class from WordPress.
*/

/*# sourceMappingURL=style.css.map */