/*
Theme Name: Uffa Fox Sailcloth (Divi child)
Theme URI: https://www.uffafox.com/
Template: Divi
Author: Built for the Uffa Fox archive (Ford / Cowes)
Author URI: https://www.uffafox.com/
Description: Sailcloth styling for Divi: a light, warm, nautical palette of off-white canvas, deep navy and rope tan, with classic serif headings. It styles Divi's own modules so all pages are built and edited in the Divi Builder. Includes helper classes (uf-card, uf-highlight, uf-photo, uf-quote) you can apply to any module in the builder.
Version: 1.0.0
Requires at least: 6.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: uffa-fox-divi-child
*/

/* ============================================================
   1. Palette and type tokens
   ============================================================ */
:root{
  --canvas:#f4f0e7;      /* sailcloth background */
  --canvas-2:#ece6d8;    /* banded sections */
  --paper:#fffdf9;       /* cards */
  --ink:#20303c;         /* body text */
  --navy:#1f3a4d;        /* headings, buttons */
  --navy-deep:#162b3a;   /* footer */
  --rope:#b3894e;        /* accent */
  --rope-dark:#8c6836;
  --rule:#dcd2bf;        /* hairlines */
  --muted:#5c686c;
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   2. Base
   ============================================================ */
body,#page-container{background-color:var(--canvas)}
body,.et_pb_text,.et_pb_module,p,li{font-family:var(--sans);color:var(--ink)}
body{font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--navy)}
a:hover{color:var(--rope-dark)}

h1,h2,h3,h4,h5,h6,
.et_pb_module h1,.et_pb_module h2,.et_pb_module h3,.et_pb_module h4,
.et_pb_slide_title,.et_pb_fullwidth_header .et_pb_module_header{
  font-family:var(--serif);font-weight:600;color:var(--navy);line-height:1.14;letter-spacing:.01em;
}
h1{font-size:clamp(2.3rem,5vw,3.5rem)}
h2{font-size:clamp(1.8rem,3.3vw,2.5rem)}
h3{font-size:1.45rem}

/* Section padding a little calmer than Divi's default */
.et_pb_section{padding:64px 0;background-color:transparent}
.et_pb_row{padding:22px 0}

/* ============================================================
   3. Header and navigation (with working dropdown)
   ============================================================ */
#main-header{background-color:var(--canvas) !important;box-shadow:none;border-bottom:1px solid var(--rule)}
#main-header .logo_container{padding:6px 0}
#logo{max-height:78%}

#top-menu li a,.et_pb_menu .et-menu li a{
  font-family:var(--sans);font-weight:500;font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink) !important;opacity:1;padding-bottom:14px;
}
#top-menu li a:hover,.et_pb_menu .et-menu li a:hover{color:var(--navy) !important;opacity:1}
#top-menu li.current-menu-item > a,
#top-menu li.current-menu-ancestor > a{color:var(--navy) !important;border-bottom:2px solid var(--rope)}

/* Dropdown panel */
#top-menu li ul.sub-menu,.et_pb_menu .et-menu li ul.sub-menu{
  background:var(--paper);border:1px solid var(--rule);border-top:2px solid var(--rope);
  box-shadow:0 10px 30px rgba(32,48,60,.10);padding:6px 0;width:250px;
}
#top-menu li ul.sub-menu li a,.et_pb_menu .et-menu li ul.sub-menu li a{
  width:100%;padding:10px 20px !important;font-size:.76rem;letter-spacing:.09em;color:var(--ink) !important;border:0;
}
#top-menu li ul.sub-menu li a:hover{background:var(--canvas-2);color:var(--navy) !important;opacity:1}
/* Mobile menu */
.et_mobile_menu{background:var(--canvas);border-top:2px solid var(--rope)}
.et_mobile_menu li a{color:var(--ink);font-family:var(--sans);text-transform:uppercase;font-size:.85rem;letter-spacing:.08em}

/* ============================================================
   4. Buttons
   ============================================================ */
.et_pb_button,.et_pb_button:hover{
  font-family:var(--sans) !important;font-weight:600 !important;font-size:.78rem !important;
  letter-spacing:.12em !important;text-transform:uppercase;border-radius:2px !important;padding:.85em 1.7em !important;
  border:1px solid var(--navy) !important;background-color:var(--navy) !important;color:#fff !important;transition:all .18s ease;
}
.et_pb_button:after{display:none !important}
.et_pb_button:hover{background-color:var(--navy-deep) !important;border-color:var(--navy-deep) !important;padding:.85em 1.7em !important}
/* Add CSS class "uf-btn-rope" to a Divi button for the accent style */
.uf-btn-rope.et_pb_button,.uf-btn-rope .et_pb_button{background-color:var(--rope) !important;border-color:var(--rope) !important}
.uf-btn-rope.et_pb_button:hover,.uf-btn-rope .et_pb_button:hover{background-color:var(--rope-dark) !important;border-color:var(--rope-dark) !important}
/* "uf-btn-ghost" for outline style on light backgrounds */
.uf-btn-ghost.et_pb_button,.uf-btn-ghost .et_pb_button{background-color:transparent !important;color:var(--navy) !important}
.uf-btn-ghost.et_pb_button:hover,.uf-btn-ghost .et_pb_button:hover{background-color:var(--navy) !important;color:#fff !important}

/* ============================================================
   5. Helper classes to apply in the Divi Builder
   (Module settings, Advanced tab, CSS Class)
   ============================================================ */

/* uf-band : section with the banded canvas background */
.uf-band{background-color:var(--canvas-2) !important;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
/* uf-paper : section on the lighter paper tone */
.uf-paper{background-color:var(--paper) !important;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

/* uf-eyebrow : small uppercase kicker above a heading (apply to a Text module) */
.uf-eyebrow,.uf-eyebrow p{
  font-family:var(--sans) !important;text-transform:uppercase;letter-spacing:.2em;
  font-size:.72rem !important;font-weight:600;color:var(--rope-dark) !important;margin-bottom:.5rem;
}
/* uf-lede : larger intro paragraph */
.uf-lede,.uf-lede p{font-size:1.2rem !important;color:var(--muted) !important;line-height:1.6}

/* uf-card : a bordered card. Apply to a Column or a Blurb module. */
.uf-card{background:var(--paper);border:1px solid var(--rule);border-radius:3px;overflow:hidden;
  box-shadow:0 1px 2px rgba(32,48,60,.05),0 10px 30px rgba(32,48,60,.07);transition:transform .18s ease,box-shadow .18s ease}
.uf-card:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(32,48,60,.13)}
.uf-card .et_pb_blurb_content{max-width:100%}
.uf-card .et_pb_main_blurb_image{margin-bottom:0}
.uf-card .et_pb_main_blurb_image img{width:100%;height:auto;display:block;border-bottom:1px solid var(--rule)}
.uf-card .et_pb_blurb_container{padding:20px 22px 24px}
.uf-card h4,.uf-card .et_pb_module_header{font-family:var(--serif) !important;font-size:1.45rem !important;color:var(--navy) !important;margin-bottom:.3em}
.uf-card p{color:var(--muted);font-size:.96rem}

/* uf-highlight : a "high point" stat block (Blurb or Text module) */
.uf-highlight{border-top:2px solid var(--rope);padding-top:14px}
.uf-highlight h4,.uf-highlight .et_pb_module_header{
  font-family:var(--serif) !important;font-size:2.3rem !important;font-weight:600;color:var(--navy) !important;line-height:1;margin-bottom:.2em}
.uf-highlight p{font-size:.95rem;color:var(--muted);line-height:1.5}

/* uf-photo : framed photograph with caption (apply to an Image module) */
.uf-photo .et_pb_image_wrap{border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:var(--paper);display:block}
.uf-photo img{width:100%;height:auto;display:block}
.uf-photo .et_pb_image_caption,.uf-photo figcaption{
  font-size:.82rem;color:var(--muted);font-style:italic;padding-top:.5em;display:block;text-align:left}

/* uf-quote : the big pull quote (Text or Blurb module) */
.uf-quote,.uf-quote p{
  font-family:var(--serif) !important;font-style:italic;font-size:clamp(1.5rem,3vw,2.2rem) !important;
  color:var(--navy) !important;line-height:1.2;text-align:center}
.uf-quote cite{display:block;font-family:var(--sans);font-style:normal;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rope-dark);margin-top:.7em}

/* uf-rule : a hairline divider */
.uf-rule{border-top:1px solid var(--rule)}

/* ============================================================
   6. Content typography inside Divi text modules
   ============================================================ */
.et_pb_text h2{margin-top:1.2em}
.et_pb_text ul,.et_pb_text ol{padding-left:1.2em;line-height:1.7}
.et_pb_text blockquote{border-left:3px solid var(--rope);padding-left:1.2em;font-family:var(--serif);
  font-style:italic;font-size:1.3rem;color:var(--navy)}
.et_pb_text table{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--rule)}
.et_pb_text th,.et_pb_text td{padding:.6em .9em;border-bottom:1px solid var(--rule);text-align:left}
.et_pb_text thead th{background:var(--canvas-2);color:var(--navy)}

/* Gallery / image grids keep a consistent frame */
.et_pb_gallery_image,.et_pb_image_wrap{border-radius:3px}

/* ============================================================
   7. Footer
   ============================================================ */
#main-footer{background-color:var(--navy-deep)}
#footer-widgets .footer-widget h4,#footer-widgets h4.title{
  color:#fff;font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem}
#footer-widgets .footer-widget li a,#main-footer,#main-footer p,#main-footer li{color:#c4d0d3}
#footer-widgets .footer-widget li a:hover{color:#fff}
#footer-bottom{background-color:rgba(0,0,0,.2)}
#footer-info,#footer-info a{color:#8ea3a7;font-size:.82rem}

/* ============================================================
   8. Responsive
   ============================================================ */
@media (max-width:980px){
  .et_pb_section{padding:44px 0}
  .uf-quote,.uf-quote p{font-size:1.4rem !important}
}


/* ============================================================
   Home hero: readable text panel over the background photograph
   ============================================================ */
body.home .et_pb_section_0{background-position:center center;background-size:cover}
body.home .et_pb_section_0 .et_pb_column.et_pb_column_0{background-color:rgba(16,32,44,.74) !important;padding:40px 38px !important;border-radius:3px !important;max-width:660px !important}
body.home .et_pb_section_0 h1{color:#ffffff !important}
body.home .et_pb_section_0 .et_pb_text p{color:#f1f3f2 !important}
body.home .et_pb_section_0 .uf-eyebrow p{color:#e8d4ad !important}
body.home .et_pb_section_0 .uf-btn-ghost .et_pb_button,
body.home .et_pb_section_0 .uf-btn-ghost.et_pb_button{color:#ffffff !important;border-color:#ffffff !important;background:transparent !important}
body.home .et_pb_section_0 .uf-btn-ghost .et_pb_button:hover{background:#ffffff !important;color:#1f3a4d !important}
@media (max-width:768px){body.home .et_pb_section_0 .et_pb_column{padding:26px 22px}}
/* ===== FOOTER TIDY ===================================== */
#main-footer #footer-widgets{display:none !important}
#main-footer{background-color:var(--navy-deep) !important}
#footer-bottom{background-color:transparent !important;padding:20px 0 !important;border-top:1px solid rgba(255,255,255,.10)}
#footer-info{float:none !important;text-align:center;width:100%;font-size:.8rem;color:#93a6ab;visibility:hidden;position:relative;line-height:1.6}
#footer-info a{display:none}
#footer-info::after{content:"Uffa Fox On-line, the designs of Uffa Fox kept for study, restoration and enjoyment. admin@uffafox.com";visibility:visible;position:absolute;left:0;right:0;top:0;color:#93a6ab}
#footer-bottom .et-social-icons{display:none !important}