@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Lato:wght@300;400;700&display=swap');
:root{--teal:#008080;--coral:#ff6f61;--tan:#d2b48c;--white:#fff;--black:#000;--h:'Poppins',sans-serif;--b:'Lato',sans-serif;--rad:1rem}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--b);color:var(--black);background:var(--white);line-height:1.7;font-size:18px}
h1,h2,h3,h4,h5,h6{font-family:var(--h);margin:0 0 .5rem;line-height:1.2}
a{color:var(--teal);text-decoration:none;transition:.3s}
a:hover{color:var(--coral)}
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: .75rem 2rem;
  background: var(--teal);
  color: var(--white);
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
  transition: .3s;
}

/* 2) then add this as a separate rule */
.site-title a,
.site-title a:visited {
  color: var(--white);          /* shows as white on the teal bar   */
}

.site-title a:hover,
.site-title a:focus {
  color: var(--coral);          /* still changes to coral on hover  */
}
header.scrolled{background:var(--black)}
.site-title{font-size:1.75rem;font-weight:600}
nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
nav li{margin-right:1.5rem;position:relative}
nav a{color:var(--white);padding-bottom:4px}
nav a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:.3s}
nav a:hover::after{transform:scaleX(1)}
.hero{padding:6rem 2rem;text-align:center;color:var(--white);background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url('https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=1350&q=80') center/cover}
.hero h1{font-size:3rem;margin-bottom:1rem}
.btn{display:inline-block;padding:.75rem 1.5rem;border-radius:var(--rad);font-weight:600;transition:.3s}
.btn-primary{background:var(--coral);color:var(--white)}
.btn-primary:hover{background:var(--teal);transform:translateY(-2px)}
.section{padding:4rem 2rem;max-width:1100px;margin:auto}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2rem}
.card{background:var(--white);border-radius:var(--rad);box-shadow:0 4px 8px rgba(0,0,0,.1);overflow:hidden;transition:.3s;display:flex;flex-direction:column;align-items:center;text-align:center}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 24px rgba(0,0,0,.15)}
.card figure{margin:2rem 0 1rem}
.card i{font-size:3rem;color:var(--teal);transition:.3s}
.card:hover i{color:var(--coral);transform:scale(1.1)}
.card img{width:100%;height:160px;object-fit:cover}
footer{padding:3rem 2rem;background:var(--tan);text-align:center;font-size:.9rem}
.fade{opacity:0;transform:translateY(30px);transition:.6s}
.show{opacity:1;transform:translateY(0)}
/* --- put this at the very end of your stylesheet --- */

/* make the header a horizontal flex bar */
header {
  display: flex;            /* NEW */
  align-items: center;      /* vertically center items */
}

/* push the menu toward the center and the icons to the far right */
nav { margin-left: 2rem; }      /* tweak if you want more/less space */
.header-icons { margin-left: auto; }

/* style the icons */
.header-icons {
  display: flex;
  gap: 1rem;                /* space between icons */
}

.header-icons a {
  color: var(--white);      /* same white as other links */
  font-size: 1.1rem;
  transition: color .3s;
}

.header-icons a:hover { color: var(--coral); }
/* ================================================================= */
/* 1) GUTENBERG PALETTE MAP – makes “coral”, “teal”, etc. visible   */
/* ----------------------------------------------------------------- */
.has-coral-background-color  { background:#ff6f61 !important; }
.has-teal-background-color   { background:#008080 !important; }
.has-black-background-color  { background:#000 !important; }
.has-gray-background-color   { background:#666 !important; }
.has-white-background-color  { background:#fff !important; }
.has-cyan-pale-background-color  { background:#cff4ff !important; }
.has-cyan-vivid-background-color { background:#0595ff !important; }
.has-tan-background-color    { background:#d2b48c !important; }

.has-coral-color  { color:#ff6f61 !important; }
.has-teal-color   { color:#008080 !important; }
/* (add the rest if you plan to use them) */

/* ================================================================= */
/* 2) GLOBAL BUTTON STYLING (fill style)                             */
/* ----------------------------------------------------------------- */
/* a) generic WP button generated in the editor */
.wp-block-button__link.has-coral-background-color,
.btn-primary {                    /* keeps home-page buttons coral */
  background:#ff6f61;            /* coral default                 */
  color:#fff;                    /* white text                    */
}
/* b) hover – flip background to teal, text to coral */
.wp-block-button__link.has-coral-background-color:hover,
.btn-primary:hover,
.cta-link a:hover {
  background:#008080;            /* teal                          */
  color:#ff6f61;                 /* coral text                    */
}

/* If you ever create teal-filled buttons and want the reverse flip: */
/*
.wp-block-button__link.has-teal-background-color:hover {
  background:#ff6f61;
  color:#008080;
}
*/

/* ================================================================= */
/* 3) ICON BAR & HEADER (keep only one header rule in file)          */
/* ----------------------------------------------------------------- */
/* Remove duplicate header rule if needed – keep the first one only. */
/* The icon-bar styles you added earlier can stay as they are.       */


/* -------------- Brand background colors ---------------- */
body              { background: var(--teal);      }   /* global */
body.white-background { background: var(--white); }

/* -------------- “Service” section grid ----------------- */
.service-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.service-grid .card-square {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-grid .card-square .wp-block-buttons { margin-top: auto; }

.service-grid .card-square:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,.15);
  transition: transform .3s, box-shadow .3s;
}

/* -------------- Universal Gutenberg grid fallback ------ */
.is-layout-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
@media (max-width:480px){ .is-layout-grid{ grid-template-columns:1fr; } }