/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Template: twentytwentyfive
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Tags: one-column,custom-colors,custom-menu,custom-logo,editor-style,featured-images,full-site-editing,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,wide-blocks,block-styles,style-variations,accessibility-ready,blog,portfolio,news
Version: 1.2.1746718217
Updated: 2025-05-08 15:30:17

*/



/* =========================================
   Franchise Opportunities Home (Polished)
   Scope: .fo-home only
   Goal: wider, clearer section banding, better hierarchy,
         bigger “door” cards, structured steps, stronger CTA,
         more whitespace + softer borders + modern shadows
   ========================================= */

.fo-home{
  /* Layout */
  --fo-max: 1320px; /* ~1280–1360 target */
  --fo-gutter: clamp(18px, 3vw, 30px);

  /* Brand tokens */
  --fo-text: #0f172a;
  --fo-muted: rgba(15, 23, 42, .72);
  --fo-muted-2: rgba(15, 23, 42, .58);

  /* Surfaces */
  --fo-page: #F9FAFB;      /* subtle page background */
  --fo-surface: #ffffff;   /* cards/hero */
  --fo-band: #F6F7FB;      /* section band */

  /* Borders + radius */
  --fo-border: rgba(0,0,0,0.06); /* softer than default */
  --fo-border-strong: rgba(0,0,0,0.10);
  --fo-radius-lg: 22px;
  --fo-radius-md: 18px;
  --fo-radius-sm: 14px;

  /* Accent */
  --fo-accent: #2563eb;

  /* Shadows (subtle by default, stronger on hover) */
  --fo-shadow-sm: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.08);
  --fo-shadow-md: 0 12px 28px rgba(15,23,42,.12);
  --fo-shadow-lg: 0 18px 44px rgba(15,23,42,.18);

  color: var(--fo-text);
}

/* Page background + slight glow behind hero */
body.home{
  background:
    radial-gradient(900px 420px at 50% -140px, rgba(37,99,235,.10), transparent 60%),
    linear-gradient(var(--fo-page), var(--fo-page));
}

/* Width + outer breathing room */
.fo-home.wp-block-group{
  max-width: var(--fo-max) !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--fo-gutter) !important;
  padding-right: var(--fo-gutter) !important;
}

/* ---------------------------------
   Typography hierarchy
   --------------------------------- */

.fo-home h1{
  font-size: clamp(38px, 3.7vw, 58px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.02em;
  margin: 0 0 14px !important;
}

.fo-home h2{
  font-size: clamp(26px, 2.4vw, 34px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0 0 12px !important;
}

.fo-home h3{
  font-size: 19px;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 10px;
}

.fo-home p{
  color: var(--fo-muted);
  line-height: 1.65; /* more “pro” readability */
}

/* Small “kicker” */
.fo-home p[style*="text-transform:uppercase"]{
  color: rgba(15,23,42,.62) !important;
}

/* Disclaimer legibility */
.fo-home .fo-hero p[style*="opacity:.75"],
.fo-home .fo-hero p[style*="opacity: .75"]{
  opacity: 1 !important;
  color: rgba(15,23,42,.62) !important;
}

/* ---------------------------------
   Section spacing + banding
   Requires: fo-section fo-cats / fo-steps / fo-cta classes
   --------------------------------- */

.fo-home .fo-section{
  position: relative;
  padding: 34px 0; /* intentional whitespace */
  margin-top: 48px;
}

/* Soft stripe behind sections */
.fo-home .fo-section::before{
  content: "";
  position: absolute;
  left: calc(-1 * var(--fo-gutter));
  right: calc(-1 * var(--fo-gutter));
  top: 0;
  bottom: 0;
  border-radius: 26px;
  background: transparent;
  z-index: 0;
}

/* Banding pattern */
.fo-home .fo-cats::before{ background: var(--fo-band); }
.fo-home .fo-steps::before{ background: transparent; }

/* Keep section content above background stripe */
.fo-home .fo-section > *{
  position: relative;
  z-index: 1;
}

/* Create clearer separation between Categories and Steps */
.fo-home .fo-cats{ padding-bottom: 46px; }
.fo-home .fo-steps{ margin-top: 56px; }

/* ---------------------------------
   HERO polish (plus optional “anchor” slot)
   Requires: fo-hero class on hero group
   --------------------------------- */

.fo-home .fo-hero{
  background: linear-gradient(180deg, #f7f8fc, var(--fo-surface)) !important;
  border: 1px solid var(--fo-border) !important;
  border-radius: var(--fo-radius-lg) !important;
  box-shadow: var(--fo-shadow-md);
  padding: clamp(34px, 4.2vw, 56px) !important; /* more whitespace */
}

/* If you later add a right-side trust panel block inside hero,
   you can target it with class “fo-hero-anchor” */
.fo-home .fo-hero .fo-hero-anchor{
  border: 1px solid var(--fo-border);
  border-radius: var(--fo-radius-md);
  background: rgba(255,255,255,.75);
  box-shadow: var(--fo-shadow-sm);
  padding: 18px;
}

/* ---------------------------------
   Columns + cards
   --------------------------------- */

.fo-home .wp-block-columns{
  gap: 20px !important;
}

/* Base card styling (softer borders, more padding) */
.fo-home .wp-block-columns .wp-block-group{
  background: var(--fo-surface);
  border: 1px solid var(--fo-border) !important;
  border-radius: var(--fo-radius-md) !important;
  padding: 26px !important; /* increased internal whitespace */
  box-shadow: var(--fo-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height: 100%; /* helps equal height */
  display: flex;
  flex-direction: column;
}

/* Hover elevation (desktop) */
@media (hover:hover){
  .fo-home .wp-block-columns .wp-block-group:hover{
    transform: translateY(-3px);
    box-shadow: var(--fo-shadow-lg);
    border-color: rgba(37,99,235,.22) !important;
  }
}

/* ---------------------------------
   Category “door” cards
   Requires: fo-cats class on section wrapper
   --------------------------------- */

.fo-home .fo-cats .wp-block-columns .wp-block-group{
  padding: 30px !important;  /* bigger = more confident */
  min-height: 200px;
  justify-content: space-between;
}

/* Make title/desc/link feel more hierarchical */
.fo-home .fo-cats h3{
  font-size: 20px;
  margin-bottom: 12px;
}

.fo-home .fo-cats p{
  color: var(--fo-muted-2);
  font-size: 16px;
}

/* CTA link inside category cards: bold, not default blue */
.fo-home .fo-cats a{
  color: var(--fo-text);
  font-weight: 750;
  text-decoration: none;
}
.fo-home .fo-cats a:hover{
  text-decoration: underline;
  text-decoration-thickness: .12em;
  text-underline-offset: .2em;
}

/* ---------------------------------
   “How it works” steps feel like steps
   Requires: fo-steps class + h3 data-step="1/2/3"
   --------------------------------- */

.fo-home .fo-steps .wp-block-columns .wp-block-group{
  background: linear-gradient(180deg, rgba(37,99,235,.04), var(--fo-surface));
}

/* Step heading badge */
.fo-home .fo-steps h3{
  display: flex;
  align-items: center;
  gap: 12px;
}

.fo-home .fo-steps h3::before{
  content: attr(data-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: var(--fo-text);
  color: #fff;
  font-weight: 800;
  flex: 0 0 auto;
}

/* If no data-step is present, don’t show a broken badge */
.fo-home .fo-steps h3:not([data-step])::before{
  content: "";
  display: none;
}

/* ---------------------------------
   Links (global for homepage, but cleaner than default)
   --------------------------------- */

.fo-home a{
  color: var(--fo-accent);
  text-decoration: none;
}
.fo-home a:hover{
  text-decoration: underline;
  text-decoration-thickness: .10em;
  text-underline-offset: .18em;
}

/* ---------------------------------
   Buttons (stronger hierarchy)
   --------------------------------- */

.fo-home .wp-block-buttons{
  gap: 14px !important;
  margin-top: 16px;
}

.fo-home .wp-block-button__link{
  border-radius: var(--fo-radius-sm) !important;
  padding: 13px 18px !important;
  font-weight: 700;
  line-height: 1.1;
}

/* Primary (first button) */
.fo-home .wp-block-buttons .wp-block-button:first-child .wp-block-button__link{
  background: var(--fo-text) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.18);
}

/* Secondary outline */
.fo-home .wp-block-button.is-style-outline .wp-block-button__link{
  border: 1px solid var(--fo-border-strong) !important;
  color: var(--fo-text) !important;
  background: rgba(255,255,255,.70) !important;
  backdrop-filter: blur(6px);
}

/* ---------------------------------
   Bottom CTA “finish line”
   Requires: fo-cta class on CTA group
   --------------------------------- */

.fo-home .fo-cta{
  margin-top: 58px !important;
  border-radius: 26px !important;
  box-shadow: var(--fo-shadow-lg);
  padding: clamp(30px, 3.8vw, 48px) !important;
}

/* Make CTA text pop */
.fo-home .fo-cta h2{
  font-size: clamp(26px, 2.4vw, 36px) !important;
  margin-bottom: 10px !important;
}
.fo-home .fo-cta p{
  color: rgba(255,255,255,.88) !important;
}

/* CTA button treatment */
.fo-home .fo-cta .wp-block-buttons .wp-block-button:first-child .wp-block-button__link{
  background: #fff !important;
  color: var(--fo-text) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
}
.fo-home .fo-cta .wp-block-button.is-style-outline .wp-block-button__link{
  border: 1px solid rgba(255,255,255,.30) !important;
  color: #fff !important;
  background: transparent !important;
}

/* ---------------------------------
   Responsiveness
   --------------------------------- */

@media (max-width: 980px){
  .fo-home.wp-block-group{
    padding-left: var(--fo-gutter) !important;
    padding-right: var(--fo-gutter) !important;
  }
  .fo-home .fo-section::before{
    left: -12px;
    right: -12px;
  }
}

/* Reduce card padding slightly on small screens */
@media (max-width: 640px){
  .fo-home .wp-block-columns .wp-block-group{
    padding: 22px !important;
  }
  .fo-home .fo-hero{
    padding: 28px !important;
  }
}


/* =========================================
   Center ONLY headings (not body text)
   Scope: .fo-home
   ========================================= */

/* Center all headings */
.fo-home h1,
.fo-home h2,
.fo-home h3{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep paragraphs and other text left-aligned */
.fo-home p,
.fo-home li,
.fo-home a,
.fo-home .wp-block-buttons{
  text-align: left !important;
}

/* IMPORTANT: Card headings should be left-aligned (so cards still read well)
   If you want card headings centered too, delete this block. */
.fo-home .wp-block-columns h3{
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Center section headings specifically (Explore/How it works/CTA) even if theme overrides */
.fo-home .fo-section > h2,
.fo-home .fo-hero h1{
  text-align: center !important;
}

/* Optional: make section header blocks sit visually centered above the grids */
.fo-home .fo-section h2{
  max-width: 30ch;
}

/* CTA header centering */
.fo-home .fo-cta h2{
  text-align: center !important;
}