/*

Theme Name: Field Place

Theme URI: https://fieldplacenew.samsonwebdesign.co.uk/

Description: Custom child theme for Field Place Manor House & Barns. Built as a child of Hello Biz so parent-theme updates can never overwrite custom code, CSS, or break the site. All site-wide styling is driven by Elementor (Site Settings / kit) plus any custom CSS added here.

Author: Samson Web Design

Author URI: https://samsonwebdesign.co.uk/

Template: hello-biz

Version: 1.0.0

License: GNU General Public License v2 or later

Text Domain: field-place

*/



/* ---------------------------------------------------------------------------

   Custom site-wide CSS for Field Place.

   Prefer Elementor Site Settings for design tokens (colours/fonts/spacing);

   use this file only for things Elementor can't do cleanly.

   --------------------------------------------------------------------------- */





/* ============================================================

   SINGLE SOURCE OF TRUTH FOR FONTS

   Headings follow the "Primary" Global Font.

   Body copy follows the "Body Text" Global Font.

   -> Change them in Elementor > Site Settings > Global Fonts.

   ============================================================ */

h1, h2, h3, h4, h5, h6,

.elementor-heading-title {

    font-family: var(--e-global-typography-primary-font-family), sans-serif !important;

}

body, p, li,

.elementor-widget-text-editor {

    font-family: var(--e-global-typography-text-font-family), sans-serif !important;

}



/* Navigation: FAMILY follows Global Fonts > Body Text; SIZE/WEIGHT come from Global Fonts > "Navigation".

   Deliberately NOT !important — the dropdown caret is an icon-font <i> injected INSIDE the link,

   and an !important family here would override its glyph font and render tofu boxes. */

.elementor-nav-menu .elementor-item,

.elementor-nav-menu--dropdown .elementor-item {

    font-family: var(--e-global-typography-text-font-family), sans-serif;

}



/* NOTE: buttons are deliberately NOT forced here — their font is owned by

   Site Settings > Buttons > Typography. Adding them back would override it. */





/* ============================================================

   BUTTON VARIANT: .btn-outline

   For buttons sitting ON a dark band. Add the CSS class "btn-outline"

   in the button's Advanced > CSS Classes field.

   Everything else (font, size, padding) still comes from Site Settings > Buttons.

   ============================================================ */

.btn-outline .elementor-button {

    background-color: transparent;

    border: 1px solid var(--e-global-color-c696dce);

    color: var(--e-global-color-c696dce);

}

.btn-outline .elementor-button:hover,

.btn-outline .elementor-button:focus {

    background-color: var(--e-global-color-c696dce);

    color: var(--e-global-color-secondary);

}


/* ============================================================
   GRAVITY FORMS  (GF 2.9 "Orbital" theme framework)
   Styled through Gravity Forms' own design tokens so the form
   inherits colours + fonts from Elementor > Site Settings.
   Change the site colours/fonts there and the forms follow.

   NOTE ON SELECTORS: GF sets these tokens on .gform-theme--framework
   / --orbital, which sit on the SAME element as .gform_wrapper and
   load after this stylesheet. A plain .gform_wrapper block ties on
   specificity and loses, so the compound selector below is required.
   ============================================================ */
.gform_wrapper.gform-theme.gform-theme--orbital,
.gform_wrapper.gform-theme,
.gform_wrapper {
    /* Fonts: follow the Global Font "Body Text" like the rest of the site */
    --gf-font-family-base: var(--e-global-typography-text-font-family), serif;
    --gf-font-family-secondary: var(--e-global-typography-text-font-family), serif;
    --gf-font-family-tertiary: var(--e-global-typography-text-font-family), serif;

    /* Primary colour drives focus rings, checkboxes and the submit button.
       The rgb triple + darker shade mirror Global Colour "Secondary" (#5C8192);
       GF needs them as separate values for its alpha blends and hover states.

       !important is required here: GF prints a per-form inline <style> block
       (#gform_wrapper_N[data-form-index].gform-theme{...}) AFTER this file, and
       an ID selector beats any sane stylesheet selector. Forcing the custom
       properties is the only way to theme every form from one place. */
    --gf-color-primary: var(--e-global-color-secondary) !important;
    --gf-color-primary-rgb: 92, 129, 146 !important;
    --gf-color-primary-darker: #4a6b7a !important;
    --gf-color-primary-lighter: #4a6b7a !important;
    --gf-color-primary-contrast: #ffffff !important;
    --gf-color-primary-contrast-rgb: 255, 255, 255 !important;

    /* Same colour inside controls (checkbox / radio ticks) */
    --gf-color-in-ctrl-primary: var(--e-global-color-secondary) !important;
    --gf-color-in-ctrl-primary-rgb: 92, 129, 146 !important;
    --gf-color-in-ctrl-primary-darker: #4a6b7a !important;
    --gf-color-in-ctrl-primary-lighter: #4a6b7a !important;
    --gf-color-in-ctrl-primary-contrast: #ffffff !important;
    --gf-color-in-ctrl-primary-contrast-rgb: 255, 255, 255 !important;

    /* Labels and descriptions in the site's greys rather than GF's near-black */
    --gf-color-out-ctrl-dark-darker: var(--e-global-color-818a442) !important;
    --gf-color-out-ctrl-dark: var(--e-global-color-text) !important;
    --gf-ctrl-label-color-primary: var(--e-global-color-818a442) !important;
    --gf-ctrl-label-color-secondary: var(--e-global-color-818a442) !important;
    --gf-ctrl-desc-color: var(--e-global-color-text);

    /* Input borders */
    --gf-color-in-ctrl-dark-lighter: #D6DBDE !important;
    --gf-ctrl-border-color: #D6DBDE !important;

    /* Type scale: GF defaults to 14px everywhere, which looks small next to
       the site's 20px body copy */
    --gf-font-size-primary: 17px;              /* what the visitor types */
    --gf-font-size-secondary: 16px !important; /* field labels */
    --gf-font-size-tertiary: 14px !important;  /* descriptions + sub-labels */

    --gf-ctrl-size-md: 48px;         /* taller, less cramped inputs */
    --gf-radius: 2px !important;     /* matches the site's near-square corners */

    /* Submit button: match Site Settings > Buttons */
    --gf-ctrl-btn-font-size-md: 18px;
    --gf-ctrl-btn-padding-x-md: 30px;
    --gf-ctrl-btn-padding-y: 14px;
    --gf-ctrl-btn-radius: 0;
}

/* Belt and braces: some GF controls set their own font stack */
.gform_wrapper input,
.gform_wrapper select,
.gform_wrapper textarea,
.gform_wrapper label,
.gform_wrapper legend,
.gform_wrapper .gform_button {
    font-family: var(--e-global-typography-text-font-family), serif;
}

/* Field labels sit a little closer to their input */
.gform_wrapper .gfield_label {
    margin-bottom: 6px;
}

/* Required marker in the site's terracotta accent rather than GF's red */
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required .gfield_required_asterisk {
    color: #D97B5A;
}

/* Submit button shape. Colours come from the form's own Style settings
   (Forms > Settings > Form Styles), which GF prints as an inline
   #gform_wrapper_N block that outranks any stylesheet. Only the two
   properties GF has no token for need !important to land. */
.gform_wrapper.gform-theme .gform_footer .gform_button,
.gform_wrapper .gform_footer .gform_button,
.gform_wrapper .gform_page_footer .gform_button {
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Clear, on-brand focus indicator (GF's own focus state is barely visible) */
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
    border-color: var(--e-global-color-secondary) !important;
    box-shadow: 0 0 0 3px rgba(92, 129, 146, 0.18) !important;
    outline: none;
}

/* Native controls pick up the brand colour */
.gform_wrapper input[type="checkbox"],
.gform_wrapper input[type="radio"] {
    accent-color: var(--e-global-color-secondary);
}

/* Selects should fill their field rather than sit at GF's "medium" field size,
   which truncates long option text. Every field also goes full width on phones. */
.gform_wrapper .gform_fields select,
.gform_wrapper .gform_fields select.medium,
.gform_wrapper .gform_fields select.small {
    width: 100% !important;
}
@media (max-width: 640px) {
    .gform_wrapper .gform_fields > .gfield {
        grid-column: 1 / -1 !important;
    }
}

/* Confirmation message after submit */
.gform_confirmation_wrapper .gform_confirmation_message {
    font-family: var(--e-global-typography-text-font-family), serif;
    font-size: 18px;
    color: var(--e-global-color-818a442);
    background: var(--e-global-color-5ec1117);
    border-left: 3px solid var(--e-global-color-secondary);
    padding: 20px 24px;
}


/* ============================================================
   BRITEBIZ WEB FORMS  (.brite-web-form)
   BriteBiz supply raw HTML with their own <style> block. That block
   is deliberately REMOVED from the embed so all styling lives here and
   every BriteBiz form on the site looks the same. Paste future forms
   as-is minus their <style>, and they inherit this automatically.

   Colours + fonts come from Elementor > Site Settings via the global
   CSS variables, so changing the palette there updates the forms too.
   ============================================================ */

/* Layout: two columns on desktop, single column on phones.
   BriteBiz uses float clearfix divs, which a grid would treat as cells. */
.brite-web-form .brite-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
}
.brite-web-form .brite-clear,
.brite-web-form .hide {
    display: none;
}
/* Long fields span the full width. The explicit class is set in the embed;
   the :has() rules cover future forms pasted without it. */
.brite-web-form .brite-row-full,
.brite-web-form .brite-field-row:has(textarea),
.brite-web-form .brite-field-row:has(input[type="submit"]) {
    grid-column: 1 / -1;
}
@media (max-width: 640px) {
    .brite-web-form .brite-form {
        grid-template-columns: 1fr;
    }
}

/* Labels: match the site's form labels */
.brite-web-form .brite-label-col label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--e-global-typography-text-font-family), serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--e-global-color-818a442);
}
/* BriteBiz marks mandatory fields with .field-required but prints no marker */
.brite-web-form .brite-label-col label.field-required::after {
    content: " *";
    color: #D97B5A;
}
/* The submit row carries an empty &nbsp; label that would add a blank line */
.brite-web-form .brite-row-submit .brite-label-col {
    display: none;
}

/* Controls */
.brite-web-form .brite-field-col input[type="text"],
.brite-web-form .brite-field-col input[type="email"],
.brite-web-form .brite-field-col input[type="tel"],
.brite-web-form .brite-field-col select,
.brite-web-form .brite-field-col textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #D6DBDE;
    border-radius: 2px;
    font-family: var(--e-global-typography-text-font-family), serif;
    font-size: 17px;
    color: var(--e-global-color-818a442);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.brite-web-form .brite-field-col textarea {
    min-height: 150px;
    resize: vertical;
}
.brite-web-form .brite-field-col input::placeholder,
.brite-web-form .brite-field-col textarea::placeholder {
    color: #9aa0a6;
}
.brite-web-form .brite-field-col input:focus,
.brite-web-form .brite-field-col select:focus,
.brite-web-form .brite-field-col textarea:focus {
    border-color: var(--e-global-color-secondary);
    box-shadow: 0 0 0 3px rgba(92, 129, 146, 0.18);
    outline: none;
}
.brite-web-form .brite-field-col input[type="checkbox"],
.brite-web-form .brite-field-col input[type="radio"] {
    width: auto;
    min-height: 0;
    margin-right: 8px;
    accent-color: var(--e-global-color-secondary);
}
.brite-web-form .brite-field-col label.brite-option {
    display: inline-block;
    margin-right: 18px;
    font-family: var(--e-global-typography-text-font-family), serif;
    color: var(--e-global-color-text);
}

/* Submit button: same as the site's Elementor buttons */
.brite-web-form .brite-field-col input[type="submit"] {
    display: inline-block;
    width: auto;
    min-height: 50px;
    padding: 14px 30px;
    background: var(--e-global-color-secondary);
    border: none;
    border-radius: 0;
    color: #ffffff;
    font-family: var(--e-global-typography-text-font-family), serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.brite-web-form .brite-field-col input[type="submit"]:hover,
.brite-web-form .brite-field-col input[type="submit"]:focus {
    background: #4a6b7a;
}