/*Oakwood ltd Framework v3.0.06  2026-03-01 */

/* FIRST: consistent box sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* SECOND: default font declaration */
/* montserrat-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('../assets/fonts/montserrat-v29-latin-regular.woff2') format('woff2');
}
/* montserrat-italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 400;
    src: url('../assets/fonts/montserrat-v29-latin-italic.woff2') format('woff2');
}
/* montserrat-700 - latin */
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('../assets/fonts/montserrat-v29-latin-700.woff2') format('woff2');
}

/* THIRD: Variables declaration */

:root {
    --site-max-width: 900px;
    /* Responsive padding */
    --spacing-inline: clamp(1rem, 5vw, 4rem);
    --spacing-block: 10px;

    --border-radius: 6px;           /* Border radius */
    --font-base: Montserrat, sans-serif;
    --font-brand: Montserrat, sans-serif;
    --font-fluid-small: clamp(1rem, 0.8vw + 0.9rem, 1.2rem);
    --font-fluid-large: clamp(1.8rem, 0.8vw + 1.6rem, 2.2rem);

    --shadow-light: 0 0 10px rgba(0,0,0,0.1);
    --shadow-medium: 0 4px 12px rgba(0,0,0,0.15);

    --title-align: center;
    --heading-align: left;
    --th-td-text-align: left;

    --brand-primary: seagreen;   /* Design tokens */
    --brand-accent: lightseagreen;

    --text-dark: black;
    --text-medium: lightslategrey;
    --text-light: white;


    --bg-outer: ivory;
    --bg-inner: white;
    --bg-blockquote-table: honeydew;

    --bg-nav-footer: seagreen;
    --text-nav:lawngreen;
    --text-nav-hover:white;
    --text-footer:white;

    --bg-button: seagreen;
    --bg-button-hover: seagreen;
    --text-button:lawngreen;
    --text-button-hover:white;
    --button-radius: 25px;

    --link-color: blue;
    --link-hover-color: navy;

    --bg-card-normal: white;
    --bg-card-highlight: honeydew;

}

/* Non container specific */

html, body {
    font-family: var(--font-base);
    margin: 0;
    padding: 0;
    /* overflow-x: hidden;  Prevents horizontal scrolling it masks bugs*/
    background: var(--bg-outer);
    color: var(--text-dark);
    scroll-behavior: smooth;
}

h1, h2 {
    text-align: var(--title-align);
}

h3, h4, h5, h6 {
    text-align: var(--heading-align);
    margin-top: 2.5em;
}

/* Responsive typography */

h1 { font-size: 1.75em; } /* reduced .25em */
h2 { font-size: 1.25em; } /* reduced .25em */
h3 { font-size: 1.17em; } /* default */
h4 { font-size: 1em ;}  /* default */
h5 { font-size: 0.83em; } /* default */
h6 { font-size: 0.67em; } /* default */


p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.6;
    margin: 0 auto 0.5em; /* top lr bottom */
}

p.larger-text {
    font-size: 1.1em;
}

a {
    color: var(--link-color);
    background-color: transparent;
    text-decoration: none;
    transition: all 0.2s ease;
}

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


/* Spaced list */
/* Vertical list — extra space between items, no underlines on links */
ul.spaced-list {
  /* list-style: none;    remove bullets if you want */
  padding: 20px;
  margin: 1rem;
}
ul.spaced-list li {
  margin: 0 0 1rem 0;     /* bottom spacing between items */
}
ul.spaced-list a {
  text-decoration: none;  /* remove underline */
  font-size: 1.25rem;   /* increase text size (adjust as needed) */
  /*color: inherit;         /* keep link colour same as surrounding text */
}

ul.spaced-list a:hover {
    color: var(--link-hover-color);
    font-weight:700;

}

/* End Spaced list */


button {
    background-color: var(--bg-button);
    color: var(--text-button);
    font-size: 1.2rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    border: none;
    border-radius: var(--button-radius);
    font-weight: 500;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        font-weight 0.15s ease;
}

button:hover {
    color: var(--text-button-hover);
    background-color: var(--bg-button-hover);
}

/* End non container specific */

/*sections */

.top-bar {
    padding: 10px 0 0;             /* Small top padding */
    display: flex;
    justify-content: space-between; /* Horizontal spacing */
    align-items: center;            /* Center items vertically */
    max-width: var(--site-max-width);               /* Single boxed content */
    margin: 0 auto;                 /* Center container horizontally */
}

.top-bar .call {
    text-decoration: none;
    font-size: var(--font-fluid-small);
    font-weight: bold;
    font-style: italic;
    color: var(--text-medium);
    margin-left: auto;  /* Pushes this flex item to the right */
    margin-right: 20px; /* Optional right margin */
}


.top-bar .call:hover {
    color: var(--link-hover-color);
}

/* Header 1 2 or 3 items one row */

.site-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: var(--site-max-width);
    margin: 10px auto 20px;
    padding: 0 10px;
    gap: 10px;
}
.site-title {
    font-family: var(--font-brand);
    font-weight: 400;
    font-size: 4rem;
    text-align: center;
}
.header-left {
    grid-column: 1;
}

.header-center {
    grid-column: 2;
    text-align: center;
}

.header-right {
    grid-column: 3;
    text-align: right;
}

/* Responsive images */
.header-left img,
.header-center img,
.header-right img {
    max-width: 100%;
    height: auto;
}

nav {
    display: flex;
    flex-wrap: wrap;               /* allow items to wrap to new lines */
    background-color: var(--bg-nav-footer);
    justify-content: center;       /* horizontal spacing */
    padding: 10px 0;               /* top and bottom */
    max-width: var(--site-max-width);              /* single column boxed content */
    margin: 0 auto;                /* center container horizontally */
}

nav a {
    color: var(--text-nav);
    padding: 0 15px;               /* left and right spacing */
    text-decoration: none;         /* remove underline */
    font-weight: bold;
    white-space: nowrap;           /* optional: prevent text itself from breaking */
}

nav a:hover {
    color: var(--text-nav-hover);
}


.hero-container {
    max-width: var(--site-max-width);
    display: block; /* Default but safe repeat */
    margin: 0 auto;
}

.hero-image {
    position: relative;
    aspect-ratio: 4 / 1;
    width: 100%;
    display: block;  /* Default but safe repeat */
}

.hero-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;  /* Fills container fully */
    display: block;
    object-fit: cover;  /* Crop if needed, prevents distortion */
}


/* End hero */

/* Intro */

.intro-container {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 20px 0;
}

.intro-heading {
    width: 100%;
    font-style: italic;
    font-size: var(--font-fluid-small);
    text-align: center;
}

.intro-item {
    width: 85%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--bg-inner);

}

.intro-item p {
    max-width: 85%;
    margin-bottom: 1rem;
    text-align: justify;
    text-justify: inter-word;
    font-size: var(--font-fluid-small);
}


.intro-item img {
    display: block;
    margin: 0 auto;
    max-width: 95%;
    padding-top: 10px;
    height: auto;

}

.intro-item blockquote {
    background: var(--bg-blockquote-table);
    padding-top: 10px;
}
/* End intro */

/* ==========================
   Oakwood 3.x Card System
   Uses --bg-card-normal and --bg-card-highlight
   ========================== */

/* ----------------------------
   Grid Container
---------------------------- */
.card-grid {
    --columns: 3; /* default number of columns */

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: var(--spacing-block);
    max-width: var(--site-max-width);  /* limits total width */
    width: 100%;                       /* allows responsive shrink */
    margin: 0 auto 20px;               /* centers the grid horizontally */
    padding: 0 10px;
}

/* media Tablet: cap columns at 2 */
/* media Mobile: always 1 column */

/* ----------------------------
   Individual Card (Text + Image)
---------------------------- */
.card {
    background-color: var(--bg-card-normal);
    box-shadow: var(--shadow-light);
    border-radius: var(--border-radius);
    padding: 20px;          /* internal padding for text cards */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

/* Card image spacing for text cards */
.card img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-bottom: 1rem;    /* spacing between image and text */
}

/* example html <article class="card card--highlight card--clickable"> */

/* ----------------------------
   Highlight Variant
---------------------------- */
.card--highlight {
    background-color: var(--bg-card-highlight);
}

/* ----------------------------
   Clickable / Bordered Variants
---------------------------- */
.card--clickable {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.card--clickable:hover {
    transform: translateY(-4px);
}

.card--bordered {
    border: 1px solid #ccc;
}

/* ----------------------------
   Image-only Card
---------------------------- */
.card--image-only {
    padding: 0;             /* remove padding */
}

.card--image-only img {
    margin: 0;              /* remove image spacing */
    width: 100%;
    height: 100%;           /* fill card height */
    object-fit: cover;
    border-radius: var(--border-radius);
}

/* ----------------------------
   Typography
---------------------------- */
.card h3 {
    margin: 0 0 0.5rem 0;
}

.card p {
    margin-bottom: 1rem;
}

/* End Card conatiner */
/* Content */

/* Main content wrapper */
.content-container {
    max-width: var(--site-max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding-inline: var(--spacing-inline);
    padding-block: var(--spacing-block);
    align-items: stretch; /* important */
}

/* Individual content blocks */
.content-item {
    width: 100%;
    padding: clamp(5px, 1vw, 32px);
    background-color: var(--bg-inner);
    box-shadow: var(--shadow-light);
    margin: 3rem auto 1.5rem;
}

/* Figures */
.content-item figure {
    margin: 3rem 0 1.5rem;
    box-shadow: none;
    background: none;
}

/* Images */
.content-item img {
    display: block;
    max-width: 100%;       /* keeps image within container width */
    max-height: 90vh;     /* limits height to viewport */
    width: auto;           /* keeps aspect ratio */
    height: auto;          /* keeps aspect ratio */
    margin: 0 auto 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    object-fit: contain;   /* ensures it fits inside max-height/max-width */
}


/* Captions (centered, responsive) */
.content-item figcaption {
    max-width: 700px;
    margin: 0 auto;
    font-size: clamp(1rem, 2vw + 0.5rem, 1.2rem);
    font-style: italic;
    text-align: center;
}

/* Narrow image blocks (portrait) */
.content-item.narrow figure {
    max-width: 50%;           /* mobile: 50% of container */
    margin: 3rem auto 1.5rem; /* vertical rhythm */
}

        /* Side-by-side image container */
.content-item.side-by-side {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    align-items: stretch;   /* critical */
    margin: 3rem auto 1.5rem;
}

.content-item.side-by-side figure {
    display: grid;
    grid-template-rows: 1fr auto; /* second follows first */
    height: 100%;
    margin: 1.5em 0 0em;
  }

/* Images themselves */
.content-item.side-by-side img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;           /* desktop: never dominate screen */
    object-fit: contain;
    margin: 0;
}

/* Captions stay aligned */
.content-item.side-by-side figcaption {
    margin-top: 0.75rem;
    margin-bottom: 1.75rem;
    text-align: center;
    align-self: end;         /* baseline alignment */
}


.content-item p {
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
}

.content-item ul {
    max-width: 65ch;
    margin: 1rem auto;      /* center the ul like the paragraph */
    /*padding-left: 0;         remove browser’s default indent */
    font-size: clamp(1rem, 2vw + 0.5rem, 1.2rem);
    line-height: 1.6;
}

.content-item li {
    margin-left: 1.2rem;    /* manual indent so bullets align with text */
    margin-bottom: 0.6rem;
}

.content-item blockquote {
    width: 95%;                /* Makes blockquote wider on all screens */
    max-width: 600px;           /* Set a sensible upper limit for desktops */
    background: var(--bg-blockquote-table);
    border-left: 4px solid #ccc;
    padding: 0.5em 1em;
    margin: 1em auto;
    font-size: clamp(1rem, 2vw + 0.5rem, 1.2rem);
    font-style: italic;
}

/* Table styling */
.content-item .table-wrapper { /* Wrapper for responsive scrolling */
    overflow-x: auto;       /* horizontal scroll if table too wide */
}

.content-item table {
    width: 95%;
    max-width: 600px;
    margin: 1em auto;
    border-left: 4px solid #ccc;
    background-color: honeydew;
    border-collapse: collapse;   /* prevents double borders */
    font-size: clamp(1rem, 2vw + 0.5rem, 1.2rem);
}

/* Cell styling to mimic border="1" */
.content-item table th,
.content-item table td {
    border: 1px solid black;   /* cell borders */
    padding: 0.5em 1em;
    text-align: var(--th-td-text-align);          /* default alignment */
}

/* Only shrink specific header cells */
.content-item table th.small-head {
    font-size: 0.85rem;
    font-weight: bold;         /* optional: keeps header emphasis */
}

/*End content*/
/* Call to action */
.cta-container {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 20px 0;
}

.cta-item {
    width: 100%;
    margin:0 auto;
    font-style: italic;
    font-size: var(--font-fluid-large);
    text-align: center;
    padding-top: 2rem;
}
/* End call to action */

/* Single contact Column */
.container-contact {
    max-width: var(--site-max-width);
    margin: 0 auto;
    background-color: var(--bg-inner);
    box-shadow: var(--shadow-light);
}

.item-contact {
    max-width: 75%; /* Keeps sections from being too wide */
    margin: 20px auto;
    padding-block:20px;
    background-color: var(--bg-inner);

}

input[type="text"], input[type="email"], input[type="tel"], textarea {
    width: 95%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    background-color: var(--bg-blockquote-table);
}

label, textarea {
    display: block; /* force new lines between items*/
    /*margin-bottom: 10px; /* optional spacing */
}

#email {
    max-width: 600px;
}

#phone {
    max-width: 200px;
}

#callback {
    max-width: 300px;
}

button[type="submit"] {
    padding: 0.6rem 2rem;
    margin-top: 2em;
}

label.required:after {
    content: " *";
    color: red;
}
.red-asterisk::before {
    content: "* ";
    color: red;
}

.cf-turnstile {
    overflow: hidden;
    display: block;
}


/* End Single contact column */

/* Back to top */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 10px 16px;
    font-size: 2rem;
    line-height:0.8rem;
    font-weight: bold;
    color: var(--text-button);
    background: var(--bg-button);
    border-radius: var(--border-radius);
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 1000;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.back-to-top:hover, .back-to-top:focus {
    opacity: 1;
    color: var(--text-button-hover);
    outline-offset: 2px;
}
/* End back to top */

/* Footer */

footer {
    display: flex;
    flex-direction: column;
    background-color:var(--bg-nav-footer);
    align-items: center;        /* Center items horizontally */
    gap: 20px;
    padding: 10px 0px;          /* Top and Bottom */
    max-width: var(--site-max-width);           /* Single column boxed content */
    margin: 20px auto;             /* Center container horizontally */

}

footer .item-footer {
    width: 100%;
    color: var(--text-footer);
    text-align: center;
    padding: 20px 0;
}

/* End footer */


/* Media queries */

@media (max-width: 1024px) {
    .card-grid {
        grid-template-columns: repeat(min(var(--columns), 2), 1fr);
    }
}


@media (max-width: 768px) {

    .top-bar .call { /*Check if needed on gFcare */
        font-size: clamp(0.9rem, 0.8vw + 0.8rem, 1rem);
    }

    .site-header {
        display: grid;
        grid-template-columns: 1fr; /* Single column */
        text-align: center;
        gap: 5px;
    }

    .header-left {
        grid-column: 1;
    }

    .header-center {
        grid-column: 1;       /* Move below logo */
        margin-top: 10px;
    }

    .header-right {
        display: none;        /* Hide Instagram icon */
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .content-item.side-by-side {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .content-item.side-by-side figure {
        width: 100%;
        max-width: 500px;
    }

    /* 10px space above the first image only */
    .content-item.side-by-side figure:first-child {
        margin-top: 10px;
    }

    .content-item.side-by-side img {
        height: auto;
    }

    .intro-title {
      /* font-size: 0.7em;   Change font size  on mobile */
    }

    .intro-icon {
        display: block; /* Display on mobile */
        padding:20px;
    }


    .cf-turnstile {
        width: 200px;
    }
}


/* end media queries */