/*
Theme Name: Twenty Twenty-Four Child
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Description: Twenty Twenty-Four Child Theme
Author: the WordPress team
Author URI: https://wordpress.org
Template: twentytwentyfour
Version: 1.0.0
*/

/* Color Tokens */
:root {
    --color-slate-100: #f0f9f9;
    --color-slate-200: #e1f3f3;
    --color-slate-300: #a2dddd;
    --color-slate-400: #2ebdbd;
    --color-slate-600: #008c8c;
    --color-slate-800: #004242;

    --color-orange-100: #fff8f3;
    --color-orange-200: #fff0e5;
    --color-orange-300: #ffcda9;
    --color-orange-400: #ff9142;
    --color-orange-600: #ff6b00;
    --color-orange-700: #cb4319;
    --color-orange-900: #5a2700;

    --color-red-100: #ffefef;
    --color-red-200: #f0d3d3;
    --color-red-300: #e39999;
    --color-red-400: #e44848;
    --color-red-600: #b01a1a;
    --color-red-800: #770000;

    --color-grey-100: #f7faff;
    --color-grey-200: #e9f1fc;
    --color-grey-300: #c3d0e1;
    --color-grey-400: #9eaaba;
    --color-grey-600: #5b697d;
    --color-grey-800: #222e3f;

    --color-link: #4299e1;
    --color-link-hover: #2a65b8;

    --color-status-green: #00673a;
    --color-status-blue: #091c6f;
    --color-status-grey: #3b4747;
    --color-status-red: #800000;

    --color-border-light: var(--color-grey-200);
    --color-border-medium: var(--color-grey-300);
    --color-border-dark: var(--color-grey-500);
    --color-cell-disabled: var(--color-grey-200);

    /* Alternative naming convention */
    --vrc-text-light: #303d3d;
    --vrc-text-medium: #223434;
    --vrc-text-dark: #162424;

    /* Font Variables */
    --vrc-font-size--xs: 0.7rem;
    --vrc-font-size--s: 0.9rem;
    --vrc-font-size--m: 1.05rem;
    --vrc-font-size--l: clamp(1.1rem, 1.1rem + ((1vw - 0.2rem) * 0.635), 1.5rem);
    --vrc-font-size--xl: clamp(1.39rem, 1.39rem + ((1vw - 0.2rem) * 0.767), 1.85rem);
    --vrc-font-size--xxl: clamp(1.85rem, 1.85rem + ((1vw - 0.2rem) * 1.083), 2.5rem);
    --vrc-font-size--xxxl: clamp(2.5rem, 2.5rem + ((1vw - 0.2rem) * 1.283), 3.27rem);
    --font-primary: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-heading: "Montserrat", Georgia, serif;
}

/* Global Font Settings */
body {
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.6;
    color: var(--vrc-text-dark);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading,
.wp-block-site-title {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.3;
    color: var(--vrc-text-dark);
}

h1 {
    font-size: clamp(2rem, 4vw, 3rem);
}
h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}
h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}
h4 {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}
h5 {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
}
h6 {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
}

/* Paragraphs and body text */
p,
.wp-block-paragraph {
    font-family: var(--font-primary);
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.7;
}

.tec-img-bullet-point {
    position: relative;
    font-family: system-ui, sans-serif;
    color: #4a5568; /* gray text */
}

/* Create the decorative bullet */
.tec-img-bullet-point::before {
    content: "";
    position: absolute;
    left: -6px; /* move slightly left of text */
    top: 0.35em; /* vertically align with first line */
    width: 60px;
    height: 12px;
    background: #cbd5e1; /* light bluish gray */
    border-radius: 10px;
    transform: rotate(-25deg);
    z-index: 0; /* behind text */
}

/* Ensure text is above the bullet */
.tec-img-bullet-point strong {
    position: relative;
    z-index: 1;
    font-weight: 600;
    color: #374151; /* darker for contrast */
}

/* Optional paragraph styling */
.tec-img-bullet-point p {
    margin: 0;
    margin-top: 2px;
    font-size: 0.9rem;
    color: #4b5563;
}

.tec-circle-bg {
    color: #fff !important;
    padding: 6px 12px;
    border-radius: 21px;
    background: linear-gradient(180deg, #b01a1a 0%, #d16a38 100%);
}

/* Global full-height layout for block themes */
html,
body {
    height: 100%;
    margin: 0;
    width: 100%;
}
.wp-site-blocks {
    min-height: 100svh; /* better on mobile than 100vh */
    display: flex;
    flex-direction: column;
}
header,
.wp-block-template-part[area="header"] {
    flex: 0 0 auto;
}
main,
.wp-block-template-part[area="content"],
.wp-block-group.is-layout-constrained {
    flex: 1 0 auto;
}
footer,
.wp-block-template-part[area="footer"] {
    flex: 0 0 auto;
}

.wp-block-group.woocommerce.product {
    display: contents;
}

/* Navigation */
.wp-block-navigation,
.wp-block-navigation-link {
    font-family: var(--font-primary);
    font-weight: 500;
}

/* Buttons */
.wp-block-button__link,
.wp-element-button {
    font-family: var(--font-primary);
    font-weight: 600;
}

.wp-block-cover {
    margin-block-start: 0 !important; /* Cover image = margin-top:0px */
}

:where(.wp-site-blocks) > * {
    margin-block-start: 0 !important; /* Site block = margin-top:0px */
}

.body-wrapper {
    margin: 1 rem;
}

/* Customized Header that is transparent when at top=0 and colored when sticky */

.header-transcient {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    background-color: transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Make all immediate header children transparent too */
.header-transcient > * {
    background-color: transparent !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.header-transcient.sticky {
    background: linear-gradient(90deg, #5a2700 24.53%, #ff6b00 100%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.header-transcient,
.header-transcient > * {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* hide by default */
.hide,
.show-when-logged-in,
.show-when-logged-out {
    display: none;
}

/* ensure hidden if neither logged-in nor logged-out is present */
body:not(.logged-in):not(.logged-out) .show-when-logged-in {
    display: none !important;
}
body:not(.logged-in):not(.logged-out) .show-when-logged-out {
    display: inline-flex !important;
}

/* reveal based on body classes WP already outputs */
.logged-in .show-when-logged-out {
    display: none !important;
}
.logged-in .show-when-logged-in {
    display: inline-flex !important;
}
.logged-out .show-when-logged-in {
    display: none !important;
}
.logged-out .show-when-logged-out {
    display: inline-flex !important;
}

/* optional: make the icon button round and tidy */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    text-decoration: none;
    transition: background 0.2s;
}
.icon-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* Edit WooCommerce Plugin styles */
.woocommerce div.product form.cart .variations select {
    line-height: normal;
}

@media (max-width: 782px) {
    /* WP's common mobile breakpoint */
    .wp-block-group.is-layout-constrained {
        flex-grow: 0;
    }
}