/*
 Theme Name:  akoca Child Theme
 Theme URL:    https://akoca-seo.co.uk/
 Description:  Child Theme for Divi
 Author:       Akoca SEO
 Author URI:   https://akoca-seo.co.uk/
 Template:     Divi
 Version:      1.0.0
*/

/* 
========================================
INSTRUCTIONS FOR DEVELOPERS
========================================
This section of code contains responsive heading styles, body text styles, and @font-face declarations for custom fonts. 
These styles are commented out by default to prevent them from affecting the site until they are needed. Follow the steps below 
to activate and customise them as per your project requirements.

1. ACTIVATING STYLES:
   - Remove the `/*` at the beginning and the end of any section you want to enable. This will make the styles active on the website.

2. CUSTOMISING PLACEHOLDERS:
   - Replace all instances of `PLACEHOLDER_MIN`, `PLACEHOLDER_CALC`, and `PLACEHOLDER_MAX` with the actual `clamp()` values for each heading or body text.
   - Replace `PLACEHOLDER_FONT` with your actual font family name in the `@font-face` declarations, and update the URLs to point to the correct font files.

3. ADDING/REMOVING STYLES:
   - If additional font weights or styles are required, copy the existing `@font-face` structure and adjust the weight/style accordingly.
   - Delete any unnecessary `@font-face` rules if the project doesn't require them.

5. DEACTIVATING STYLES:
   - To deactivate any section, re-wrap it in `/*`  comment tags.

By following these instructions, you ensure the template remains flexible and doesn't impact the project until customised.
========================================
*/


/* Responsive Headings */
h1 {
  font-family: 'Kaisei Opti', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1em;
}
h2 {
  font-family: 'Kaisei Opti', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: clamp(26px, 2vw, 36px);
  line-height: 1.6em;
}
h3, .et_pb_module_header h3, .et_pb_blurb_container h3 {
  font-family: 'Kaisei Opti', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.09em;
}
h4, .et_pb_text_inner h4, h5, h6 {
  font-family: 'Kaisei Opti', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2em;
}

/* Responsive Body Text */
body, p, .et_pb_text_inner, .et_pb_text_inner p, .dsm_icon_list_text, .dsm_business_hours, .dsm-content, .et_pb_blurb_description, .footer-menu a, li {
  font-family: 'Tienne', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6em;
}
a {
  color: inherit; /* Adjust as needed */
}

.banner-text, .banner-text p {
  font-family: 'Kaisei Opti',Georgia,"Times New Roman",serif;
  font-weight: 400;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.6em;}

/* ================================
SITE FONTS
=================================*/

/* ==== Tienne ==== */
@font-face {
  font-family: 'Tienne';
  src: url('/wp-content/themes/akoca-Child-Theme/fonts/tienne-v20-latin-regular.woff2') format('woff2'),
       url('/wp-content/themes/akoca-Child-Theme/fonts/tienne-v20-latin-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tienne';
  src: url('/wp-content/themes/akoca-Child-Theme/fonts/tienne-v20-latin-700.woff2') format('woff2'),
       url('/wp-content/themes/akoca-Child-Theme/fonts/tienne-v20-latin-700.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tienne';
  src: url('/wp-content/themes/akoca-Child-Theme/fonts/tienne-v20-latin-900.woff2') format('woff2'),
       url('/wp-content/themes/akoca-Child-Theme/fonts/tienne-v20-latin-900.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ==== Kaisei Opti ==== */
@font-face {
  font-family: 'Kaisei Opti';
  src: url('/wp-content/themes/akoca-Child-Theme/fonts/kaisei-opti-v10-latin-regular.woff2') format('woff2'),
       url('/wp-content/themes/akoca-Child-Theme/fonts/kaisei-opti-v10-latin-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kaisei Opti';
  src: url('/wp-content/themes/akoca-Child-Theme/fonts/kaisei-opti-v10-latin-500.woff2') format('woff2'),
       url('/wp-content/themes/akoca-Child-Theme/fonts/kaisei-opti-v10-latin-500.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kaisei Opti';
  src: url('/wp-content/themes/akoca-Child-Theme/fonts/kaisei-opti-v10-latin-700.woff2') format('woff2'),
       url('/wp-content/themes/akoca-Child-Theme/fonts/kaisei-opti-v10-latin-700.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* Poppins - Bold */
@font-face {
    font-family: 'Poppins';
    font-display: swap;
    src: url('/wp-content/themes/akoca-Child-Theme/fonts/poppins-v21-latin-700.woff2') format('woff2'),
         url('/wp-content/themes/akoca-Child-Theme/fonts/poppins-v21-latin-700.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

/* ==================================
GLOBAL BUTTON STYLES
===================================*/
/* ========== Button Styles ========== */

/* ───────── Wrapper Utilities ───────── */
.button-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 20px;
  justify-content: flex-start;
}
.button-wrap.center { justify-content: center; }
.button-wrap.right { justify-content: flex-end; }

/* ───────── Base Button ───────── */
.btn {
  --btn-bg: #8B6C42;  /* gold-brown default */
  --btn-txt: #fff;
  --btn-border: var(--btn-bg);

  font-family: 'Kaisei Opti', serif;
  font-size: 19px;
    font-weight: 700;
  padding: 14px 36px;
  border-radius: 8px !important;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(.19,1,.22,1);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-txt);
  box-shadow: none;
  letter-spacing: 0.01em;
}

/* ─── PRIMARY (default) ─── */
.btn-primary {
  /* Inherits gold-brown from base */
}
.btn-primary:hover,
.btn-primary:focus {
  background: transparent;
  color: var(--btn-bg);
  border-color: var(--btn-bg);
  box-shadow: none;
  transform: translateY(-2px) scale(1.03);
  outline: none;
}
.btn-primary:focus {
  outline: 2px solid #ccb58c;
  outline-offset: 2px;
}

/* ─── HERO PRIMARY (Green) ─── */
.button-wrap.hero .btn-primary {
  --btn-bg: #2c6a59;
  --btn-txt: #fff;
  --btn-border: #2c6a59;
}
.button-wrap.hero .btn-primary:hover,
.button-wrap.hero .btn-primary:focus {
  background: transparent !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* ─── LIGHT PRIMARY (Gold-Brown, default) ─── */
.button-wrap.light .btn-primary {
  /* No overrides needed; base is gold-brown */
}

/* ─── GREEN BG PRIMARY (Gold-Brown text on green border) ─── */
.button-wrap.green .btn-primary {
  --btn-bg: #8B6C42;
  --btn-txt: #fff;
  --btn-border: #2c6a59;
  background: var(--btn-bg);
  color: var(--btn-txt);
  border-color: var(--btn-border);
}
.button-wrap.green .btn-primary:hover,
.button-wrap.green .btn-primary:focus {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

/* ─── SECONDARY: DARK BG (White) ─── */
.btn-secondary {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background: #ffffff;
  color: #1c1c1c;
}

/* ─── SECONDARY: LIGHT variant ─── */
.button-wrap.light .btn-secondary {
  color: #2c6a59;
  border-color: #2c6a59;
}
.button-wrap.light .btn-secondary:hover,
.button-wrap.light .btn-secondary:focus {
  background: #2c6a59;
  color: #ffffff;
}

/* ─── SECONDARY: GREEN variant ─── */
.button-wrap.green .btn-secondary {
  color: #ffffff;
  border-color: #ffffff;
}
.button-wrap.green .btn-secondary:hover,
.button-wrap.green .btn-secondary:focus {
  background: #ffffff;
  color: #2c6a59;
}

/* === End Button Styles === */




/* ─── Icon size (shared) ─── */
.btn-icon{
  height:36px;
  width:auto;
  display:inline-block;
  transition:opacity .3s ease;
}

/* =====  ICON SWAPS  ===== */
/* Dark background: cream ➜ green */
.btn-secondary:hover .btn-icon{                       /* dark default */
  content:url('https://offmore-farm.akoca-seo.co.uk/wp-content/uploads/2025/05/Offmore-Farm-Asset-2-Green.svg');
}

/* Light background: green ➜ cream */
.button-wrap.light .btn-secondary .btn-icon{         /* initial icon */
  content:url('https://offmore-farm.akoca-seo.co.uk/wp-content/uploads/2025/05/Offmore-Farm-Asset-2-Green.svg');
}
.button-wrap.light .btn-secondary:hover .btn-icon{   /* swap on hover */
  content:url('https://offmore-farm.akoca-seo.co.uk/wp-content/uploads/2025/05/Offmore-Farm-Asset-2.svg');
}


/*========================================================
MENU SECTION
========================================================*/
.header-cta-blurb, .header-cta-blurb p {
	font-size: 18px;
}

/*========================================================
HERO SECTION
========================================================*/


.bg-video-fit {
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding-top: 15%!important;
}

/* Tablet */
@media (max-width: 1240px) {
    .bg-video-fit {
        padding-top: 25%!important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .bg-video-fit {
        padding-top: 35%!important;
    }
}

/* ==========
Hero Badge 
===========*/
.hero-badge{
  display: grid;                 /* easy vertical stack */
  justify-items: start;          /* left-align everything */
  gap: 8px;                      /* space between icon & text */
  max-width: 280px;
  margin-bottom: 1rem;

  /* pill container */
  background: rgba(0,0,0,0.38);
  border-radius: 48px;           /* pill shape like the reference */
  padding: 12px 18px;
  box-shadow: 0 2px 16px rgba(44,106,89,0.10);
  backdrop-filter: blur(2px);
}

.hero-badge img{
  width: 92px;                   /* icon size (desktop) */
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
  margin-top: 2px;               /* tiny visual nudge */
}

.hero-badge .navigation-text{
  color: #fff;
  font-family: 'Tienne', serif;
  line-height: 1.45;
}

.hero-badge .badge-text{
  display: block;
  font-family: 'Kaisei Opti', serif;
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #f8e9d5;                
}

.hero-badge .badge-subtext{
  display: block;
  font-size: .95rem;
  color: #fff;
}

/* Responsive */
@media (max-width: 980px){
  .hero-badge{
    gap: 6px;
    max-width: 260px;
    padding: 10px 14px;
    border-radius: 40px;         /* keep pill feel when shorter */
  }
  .hero-badge img{ width: 92px; }
  .hero-badge .badge-text{ font-size: 1.02rem; }
  .hero-badge .badge-subtext{ font-size: .86rem; }
}

@media (max-width: 767px){
  .hero-badge{
    gap: 4px;
    max-width: 200px;
    padding: 8px 10px;
    border-radius: 32px;
  }
  .hero-badge img{ width: 92px; }
  .hero-badge .badge-text{ font-size: .9rem; }
  .hero-badge .badge-subtext{ font-size: .76rem; }
}


/* ===== Hero Play Button ===== */
/* Hide the text */
a.dsm-video-lightbox span {
  display: none;
}

/* Make the icon pulse */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

a.dsm-video-lightbox::after {
  animation: pulse 1.2s infinite;
  transform-origin: center;
  font-size: 24px; /* Adjust icon size if needed */
  color: #fff;     /* Icon colour */
}


/*=================================================
Form Styles 
===================================================*/
/* ======= Fluent Form Styles (global) ======= */

/* ---------- 1. Base inputs & textarea ---------- */
.fluentform .ff-el-form-control{
  font-family: 'Kaisei Opti', serif;
  font-size:16px;
  line-height:1.7em;
  padding:10px 14px;
  width:100%;
  background:#ffffff!important;
  border:1px solid #2c6a59!important;
  border-radius:3px;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.fluentform .ff-el-form-control:focus{
  outline:none;
  border-color:#2c6a59!important;
  box-shadow:0 0 0 2px rgba(44,106,89,.15);
}

/* ---------- 2. Labels & asterisks ---------- */
.fluentform label{
  font-family: 'Tienne', Georgia, 'Times New Roman', serif;
  color:#1c1c1c;
  margin-bottom:6px;
  display:block;
}
.fluentform_wrapper .ff-el-is-required .ff-req{ color:#2c6a59; }

/* ---------- 3. Submit button ---------- */
.fluentform .ff-btn.ff-btn-submit{
  font-family: 'Tienne', Georgia, 'Times New Roman', serif;
  font-size:17px;
  padding:10px 26px;
  background:transparent!important;
  color:#2c6a59!important;
  border:2px solid #2c6a59!important;
  border-radius:3px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:all .3s ease;
}

/* Leaf icon */
.fluentform .ff-btn.ff-btn-submit::after{
  content:'';
  display:inline-block;
  width:24px;
  height:24px;
  margin-left:8px;
  background:url("https://offmore-farm.akoca-seo.co.uk/wp-content/uploads/2025/05/Offmore-Farm-Asset-2-Green-1.svg")
            center / contain no-repeat;
  transition:background .3s ease;
  pointer-events:none;
}

.fluentform .ff-btn.ff-btn-submit:hover{
  background:#2c6a59!important;
  color:#ffffff!important;
}
.fluentform .ff-btn.ff-btn-submit:hover::after{
  background:url("https://offmore-farm.akoca-seo.co.uk/wp-content/uploads/2025/05/Offmore-Farm-Asset-2.svg")
            center / contain no-repeat;
}

/* ---------- 4. Alignment helpers ---------- */
.fluentform.align-center .ff_submit_btn_wrapper{ text-align:center; }
.fluentform.align-right  .ff_submit_btn_wrapper{ text-align:right;  }

/* ---------- 5. Validation / success messages ---------- */
.fluentform .ff_errors_in_inline,
.fluentform .ff-errors-in-stack{
  color:#b83030;
  font-size:14px;
}

.fluentform .ff-el-form-success{
  background:#f8e9d5;
  border-left:4px solid #2c6a59;
  padding:12px 16px;
  color:#1c1c1c;
  border-radius:3px;
}

/* ------------ 6. File upload -------------------*/
.fluentform .ff_upload_btn {
  font-family: 'Kaisei Opti', Georgia, 'Times New Roman', serif;
  font-size: 16px;
  background: transparent !important;
  color: #2c6a59 !important;
  border: 2px dashed #2c6a59 !important;
  border-radius: 3px;
  padding: 8px 20px;
  cursor: pointer;
  transition: all .3s ease;
  display: inline-block;
  margin-bottom: 6px;
}

/*=============================================================
Website Footer
=============================================================*/

/* Site Credit Styling */
.site-credit {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end; /* <- Change this from center to flex-start */
    text-align: left;            /* <- Optional fallback for inner text */
}

.site-credit img {
    max-width: 20px;
    height: auto;
}

.site-credit a {
	    font-family: 'Poppins', sans-serif;
    color: #152a43;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.site-credit a:hover {
    color: #c93939;
	text-decoration: none !important;
}

/*****Add any custom CSS below this line*****/