/* Convo — default.css
   Globals: variables, typography, forms.
   Section styles go in style.css. */


/* Avec — TODO: replace TRIAL files with licensed Avec when client provides */
@font-face {
    font-family: 'Avec Curve TRIAL';
    src: url('../webfonts/AvecCurveTRIAL-Light.eot');
    src: url('../webfonts/AvecCurveTRIAL-Light.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/AvecCurveTRIAL-Light.woff2') format('woff2'),
        url('../webfonts/AvecCurveTRIAL-Light.woff') format('woff'),
        url('../webfonts/AvecCurveTRIAL-Light.ttf') format('truetype'),
        url('../webfonts/AvecCurveTRIAL-Light.svg#AvecCurveTRIAL-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


/* Variables */
:root {

    /* Convo brand palette */
    --convo-cream-90:          #fff9f1;
    --convo-cream-100:         #fef5e8;
    --convo-cream-110:         #fcebdc;
    --convo-cream-120:         #f3dfce;
    --convo-cream-130:         #c6ad96;
    --convo-off-black-90:      #636363;
    --convo-off-black-100:     #1c1c1c;
    --convo-grey-2:            #9f9f9f;
    --convo-blue-90:           #9ec1d0;
    --convo-blue-100:          #234d67;
    --convo-brown-100:         #c66b56;
    --convo-yellow-100:        #ffb243;
    --convo-yellow-110:        #f4a432;
    --convo-green-100:         #a1a074;

    --color-black:             #000000;
    --color-white:             #ffffff;

    /* Bootstrap overrides */
    --bs-primary:              var(--convo-blue-100);
    --bs-secondary:            var(--convo-brown-100);
    --bs-primary-rgb:          35, 77, 103;
    --bs-secondary-rgb:        198, 107, 86;

    --bs-body-color:           var(--convo-off-black-100);
    --bs-body-color-rgb:       28, 28, 28;
    --bs-body-bg:              var(--color-white);
    --bs-body-bg-rgb:          255, 255, 255;

    --bs-link-color:           var(--convo-blue-100);
    --bs-link-color-rgb:       35, 77, 103;
    --bs-link-hover-color:     var(--convo-brown-100);
    --bs-link-hover-color-rgb: 198, 107, 86;

    --bs-border-color:         var(--convo-cream-120);
    --bs-border-color-rgb:     243, 223, 206;

    /* Fonts */
    --ff-display:              'Avec Curve TRIAL', serif;
    --ff-body:                 "Albert Sans", sans-serif;
    --ff-mono:                 "IBM Plex Mono", monospace;

    --bs-body-font-family:     var(--ff-body);
    --bs-heading-font-family:  var(--ff-display);
    --bs-body-font-size:       16px;
    --bs-body-line-height:     1.6;
    --bs-body-font-weight:     300;

    /* Font-size tokens */
    --fontsize-12:             12px;
    --fontsize-13:             13px;
    --fontsize-14:             14px;
    --fontsize-16:             16px;
    --fontsize-18:             18px;
    --fontsize-20:             20px;
    --fontsize-24:             24px;
    --fontsize-28:             28px;
    --fontsize-34:             34px;
    --fontsize-40:             40px;
    --fontsize-48:             48px;
    --fontsize-58:             58px;
    --fontsize-72:             72px;
    --fontsize-92:             92px;
    --fontsize-140:            140px;

    /* Letter-spacing */
    --ls-h5:                   0.2em;
    --ls-tag:                  0.3em;
    --ls-filter:               0.2em;

    /* Line-height */
    --lh-xxl:                  1.02;
    --lh-tight:                1.1;
    --lh-snug:                 1.2;
    --lh-normal:               1.4;
    --lh-relaxed:              1.6;

    /* Easing — soft animation curve for all transitions/hovers */
    --ease-out-quart:          cubic-bezier(0.25, 1, 0.5, 1);

}


/* Flex helpers */
.c-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.c-col {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}


/* Common section spacing — override per-section if needed */
.section-space {
    padding: 50px 0;
}

@media (min-width: 768px) {
    .section-space { padding: 70px 0; }
}

@media (min-width: 1400px) {
    .section-space { padding: 120px 0; }
}


/* ===== Section background color utilities ============================
   Apply to any <section> alongside its block class to override the default
   cream body background. ACF can expose these as a "Background colour"
   select field per Flexible Content row. */

.brown-section-bg  { background-color: var(--convo-brown-100)  !important; }
.green-section-bg  { background-color: var(--convo-green-100)  !important; }
.yellow-section-bg { background-color: var(--convo-yellow-100) !important; }
.blue-section-bg   { background-color: var(--convo-blue-100)   !important; color: var(--convo-cream-100); }

/* On the dark blue bg, default text + headings flip to cream for contrast.
   Brown / green / yellow keep the default off-black text (still legible). */
.blue-section-bg h1, .blue-section-bg .h1,
.blue-section-bg h2, .blue-section-bg .h2,
.blue-section-bg h3, .blue-section-bg .h3,
.blue-section-bg h4, .blue-section-bg .h4,
.blue-section-bg h5, .blue-section-bg .h5,
.blue-section-bg h6, .blue-section-bg .h6,
.blue-section-bg p,
.blue-section-bg a:not([class*="btn"]):not([class*="cta-"]) {
    color: var(--convo-cream-100);
}

.container , .container-fluid , .container-xxl{
    padding: 0 20px;
}

/* Container — xxl only */
@media (min-width: 1400px) {
    .container , .container-xxl {
        max-width: 1400px;
        
    }
}


/* Body */
body {
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--convo-off-black-100);
    background-color: var(--convo-cream-100);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* Display headlines — XXL / XL / Large */
.headline-xxl,
.headline-xl,
.headline-large {
    font-family: var(--ff-display);
    font-weight: 300;
    margin: 0 0 0.4em;
    color: inherit;
}

.headline-xxl   { font-size: 56px; line-height: var(--lh-xxl); }
.headline-xl    { font-size: 48px; line-height: var(--lh-tight); }
.headline-large { font-size: 40px; line-height: var(--lh-snug); }

@media (min-width: 768px) {
    .headline-xxl   { font-size: 72px; }
    .headline-xl    { font-size: 55px; }
    .headline-large { font-size: 52px; }
}

@media (min-width: 992px) {
    .headline-xxl   { font-size: 92px; }
    .headline-xl    { font-size: 64px; }
    .headline-large { font-size: 55px; }
}


@media (min-width: 1200px) {
    .headline-xxl   { font-size: 116px; }
    .headline-xl    { font-size: 80px; }
    .headline-large { font-size: 60px; }
}

@media (min-width: 1400px) {
    .headline-xxl   { font-size: 140px; }
    .headline-xl    { font-size: 92px; }
    .headline-large { font-size: 72px; }
}


/* Headings */
h1, h2, h3,
.h1, .h2, .h3 {
    font-family: var(--ff-display);
    font-weight: 300;
    color: inherit;
    margin: 0 0 0.4em;
}

h4, h5, h6,
.h4, .h5, .h6 {
    font-family: var(--ff-body);
    color: inherit;
    margin: 0 0 0.5em;
}

h1, .h1 { font-size: 44px; line-height: var(--lh-tight); }
h2, .h2 { font-size: 28px; line-height: var(--lh-snug); }
h3, .h3 { font-size: 26px; line-height: var(--lh-normal); }
h4, .h4 { font-size: 20px; font-weight: 400; line-height: var(--lh-snug); }
h5, .h5 {
    font-size: 14px;
    font-weight: 500;
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-h5);
    text-transform: uppercase;
}
h6, .h6 {
    font-size: 13px;
    font-weight: 500;
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-h5);
    text-transform: uppercase;
}

@media (min-width: 768px) {
    h1, .h1 { font-size: 44px; }
    h2, .h2 { font-size: 32px; }
    h3, .h3 { font-size: 28px; }
    h4, .h4 { font-size: 22px; }
}

@media (min-width: 992px) {
    h1, .h1 { font-size: 52px; }
    h2, .h2 { font-size: 36px; }
    h3, .h3 { font-size: 30px; }
    h4, .h4 { font-size: 24px; }
}

@media (min-width: 1200px) {
    h1, .h1 { font-size: 58px; line-height: var(--lh-tight); }
    h2, .h2 { font-size: 40px; line-height: var(--lh-snug); }
    h3, .h3 { font-size: 34px; line-height: var(--lh-normal); }
    h4, .h4 { font-size: 24px; line-height: var(--lh-snug); }
}


/* Body copy */
p {
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    color: inherit;
    margin: 0 0 1em;
}

p:last-child {
    margin-bottom: 0;
}

.body-text {
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
}

.body-bold {
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
}

strong,
b {
    font-weight: 700;
}

em,
i {
    font-style: italic;
}


/* Tags + labels */
.tag-mono {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    font-family: var(--ff-mono);
    font-size: 13px;
    font-weight: 400;
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-tag);
    text-transform: uppercase;
    color: inherit;
}

/* Location tag — Figma "MONO - IBM PLEX MONO/Location Tag (MONO)"
   (16px / line 1.2 / no letter-spacing / NOT uppercase) */
.location-tag {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--ff-mono);
    font-size: 16px;
    font-weight: 400;
    line-height: var(--lh-snug);
    letter-spacing: 0;
    color: inherit;
}

/* Leading dash mark — currentColor so it flips on dark-bg sections. */
.tag-mono::before,
.location-tag::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 25px;
    height: 2px;
    background-color: currentColor;
}

.tag-mono::before{
    position: relative;
    top: 9px;
}

.location-tag::before {
    width: 18px;
    height: 1px;
}

.feature-tag {
    font-family: var(--ff-mono);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--lh-snug);
    color: inherit;
}

.filter-header {
    font-family: var(--ff-body);
    font-size: 12px;
    font-weight: 600;
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-filter);
    text-transform: uppercase;
    color: inherit;
}


/* Links */
a {
    color: var(--bs-link-color);
    text-decoration: none;
    -webkit-transition: color 0.3s var(--ease-out-quart);
    -ms-transition: color 0.3s var(--ease-out-quart);
    -o-transition: color 0.3s var(--ease-out-quart);
    -moz-transition: color 0.3s var(--ease-out-quart);
    transition: color 0.3s var(--ease-out-quart);
}

a:hover,
a:focus {
    color: var(--bs-link-hover-color);
    text-decoration: none;
}


/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* Form fields — exact padding/radius set when first form section is built */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select {
    width: 100%;
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
    color: inherit;
    border-radius: 0;
    padding: 0;
    color: var(--convo-off-black-100);
    height: 50px;
    min-height: inherit;
    border: 0;
    border-bottom: 1px solid var(--color-black);
    border-radius: 0;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    
    -webkit-transition: border-color 0.3s var(--ease-out-quart), box-shadow 0.3s var(--ease-out-quart);
    -ms-transition: border-color 0.3s var(--ease-out-quart), box-shadow 0.3s var(--ease-out-quart);
    -o-transition: border-color 0.3s var(--ease-out-quart), box-shadow 0.3s var(--ease-out-quart);
    -moz-transition: border-color 0.3s var(--ease-out-quart), box-shadow 0.3s var(--ease-out-quart);
    transition: border-color 0.3s var(--ease-out-quart), box-shadow 0.3s var(--ease-out-quart);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12);
}

textarea {
    resize: vertical;
    min-height: 140px;
}

::-webkit-input-placeholder { color: var(--convo-off-black-100); opacity: 1; }
::-moz-placeholder          { color: var(--convo-off-black-100); opacity: 1; }
:-ms-input-placeholder      { color: var(--convo-off-black-100); opacity: 1; }
::-ms-input-placeholder     { color: var(--convo-off-black-100); opacity: 1; }
::placeholder               { color: var(--convo-off-black-100); opacity: 1; }

label {
    display: inline-block;
    font-family: var(--ff-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: inherit;
    margin-bottom: 8px;
}

.form-submit input[type=submit]{
    height: 50px;
    padding: 0 64px 0 30px;
    gap: 30px;
    background-color: transparent;
    color: var(--convo-off-black-100);
    border: 0.5px solid var(--convo-off-black-100);
    font-family: var(--ff-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    background-image: url(../images/icon-arrow-inline.svg);
    background-repeat: no-repeat;
    background-position: right 26px center;
    background-size: 12px 9px;
    margin-top: 30px;
    transition: all 0.3s var(--ease-out-quart);
    border-radius: 0;
    margin: 0;
}

.form-submit input[type=submit]:hover, .form-submit input[type=submit]:focus{
    background-color: var(--convo-off-black-100);
    color: var(--convo-cream-100);
    border-color: var(--convo-off-black-100);
    background-image: url(../images/icon-join-arrow.svg);
}

/* Screen-reader */
.screen-reader-text,
.sr-only {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background: var(--bs-primary);
    clip: auto !important;
    clip-path: none;
    color: var(--color-white);
    display: block;
    font-size: 16px;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}