/*
Theme Name: Kobukai Genova
Theme URI: https://kobukaigenova.it
Author: Kobukai Genova ASD
Author URI: https://kobukaigenova.it
Description: Tema vetrina per la scuola di karate Wado-Ryu Kobukai Genova. Responsive, mobile-first. Il corpo di ogni pagina è reso dai template del tema.
Version: 2.1.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kobukai-genova
Tags: responsive, custom-logo, custom-menu
*/

/* ============================================================
   Poppins font — embedded in the theme

   The .woff2 files live in assets/fonts/: the site never contacts
   Google's servers, so it does not expose visitors' IPs (GDPR requirement).
   ============================================================ */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   Variables — changing the colours here changes them site-wide

   The values are sampled from the designer renders
   (mockup/input-images-new/).
   ============================================================ */
:root {
  --primary-blue: #1662AD;  /* brand blue: header, footer, panels */
  --dark-blue:    #11538F;  /* same hue, darker, for hovers */
  --title-blue:   #1662AD;  /* titles use the same brand blue */
  --band-grey:    #EDEDED;  /* social band and copyright strip */
  --light-grey:   #F5F5F5;
  --text-grey:    #1A1A1A;  /* in the render the text is almost black */
  --table-border: #8E9FAF;  /* course schedule borders */
  --white:        #ffffff;
  --font-sans:    'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --radius:       4px;
  --shadow:       0 2px 10px rgba(0, 0, 0, 0.25);
  --header-height: 108px; /* social band + blue band, used for anchor offsets */
}

/* ============================================================
   Base

   WARNING: do NOT add a global reset such as
   `* { margin:0; padding:0 }` or `ul { list-style:none }`.
   Resets are limited to the theme's own markup (header, footer, menu).
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-grey);
  background: var(--white);
  overflow-x: hidden; /* no horizontal scroll on mobile */
}

img { max-width: 100%; height: auto; }

/* Anchors (#form, #mappa) must not slip under the sticky header. */
[id] { scroll-margin-top: var(--header-height); }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  top: 0.5rem; left: 0.5rem;
  z-index: 999;
  width: auto; height: auto;
  clip: auto;
  padding: 0.6rem 1rem;
  background: var(--white);
  color: var(--primary-blue);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

:focus-visible {
  outline: 3px solid var(--title-blue);
  outline-offset: 2px;
}

/* ============================================================
   Section-width helpers
   ============================================================ */
.section-block { padding: 40px 0; }
.section-block > .container { max-width: 1200px; }
/* Full-bleed section: spans the whole viewport. */
.section-full {
  padding: 0;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
}
.section-tight { padding: 16px 0; }

/* ============================================================
   Social band (light grey, at the top of every page)
   ============================================================ */
.social-bar {
  background: var(--band-grey);
  padding: 0.35rem 0;
  border-bottom: 1px solid #d8d8d8;
}
.social-bar .container {
  display: flex;
  justify-content: flex-end;
}
.social-links {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.social-links a {
  display: block;
  color: var(--primary-blue);
  text-decoration: none;
  transition: opacity 0.2s;
}
.social-links a:hover { opacity: 0.7; }
.social-links svg {
  display: block;
  width: 26px;
  height: 26px;
  fill: currentColor;
}

/* ============================================================
   Header (blue band: logo on the left, menu on the right)
   ============================================================ */
.site-header {
  background: var(--primary-blue);
  padding: 0.6rem 0;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: var(--shadow);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Logo — always clickable, even on the home page */
.site-logo { flex-shrink: 0; }
.site-logo a { display: block; text-decoration: none; }
.site-logo img { display: block; height: 64px; width: auto; }

/* Hamburger (below 768px only) */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
}
.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Navigation menu */
.site-nav {
  width: 100%;
  display: none;
}
.site-nav.is-open { display: block; }

.site-nav .nav-menu,
.site-nav .nav-menu .sub-menu {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
}
/* Regular weight: in the render only the active item is bold. */
.site-nav .nav-menu a {
  display: block;
  padding: 0.55rem 0.4rem;
  color: var(--white);
  text-decoration: none;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  transition: color 0.2s;
}
.site-nav .nav-menu a:hover { color: rgba(255, 255, 255, 0.75); }

/* On mobile the submenu is a slightly indented accordion. */
.site-nav .nav-menu .sub-menu {
  padding: 0 0 0.2rem 1rem;
}

/* Current page item: bold + underlined.
   current-menu-ancestor / current-page-ancestor keep CHI SIAMO active
   even inside the maestri, allenatori, atleti subpages and profiles. */
.site-nav .nav-menu .current-menu-item > a,
.site-nav .nav-menu .current_page_item > a,
.site-nav .nav-menu .current-menu-ancestor > a,
.site-nav .nav-menu .current-page-ancestor > a,
.site-nav .nav-menu .current_page_parent > a,
.site-nav .nav-menu .current-menu-parent > a {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

@media (min-width: 768px) {
  .hamburger { display: none; }
  .site-nav { display: block; width: auto; }
  .site-nav .nav-menu { flex-direction: row; padding: 0; }
  .site-nav .nav-menu a { padding: 0.4rem 1.1rem; font-size: 0.9rem; }

  /* Desktop dropdowns: a submenu opens as a blue panel below its parent
     on hover or keyboard focus, instead of stacking inline. */
  .site-nav .nav-menu > li { position: relative; }
  .site-nav .nav-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    flex-direction: column;
    min-width: 220px;
    padding: 0.3rem 0;
    background: var(--primary-blue);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 210;
  }
  .site-nav .nav-menu > li:hover > .sub-menu,
  .site-nav .nav-menu > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .site-nav .nav-menu .sub-menu a {
    padding: 0.5rem 1.1rem;
    text-transform: none;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
}

/* ============================================================
   Page body
   ============================================================ */
.page-main { min-height: 40vh; }
/* .container already carries width and spacing: excluding it avoids
   adding them twice. */
.page-main > *:not(.container) {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
}
.page-header { margin-top: 2.5rem; }
.page-content { padding-block: 2.5rem; }

/* In the render titles are blue, uppercase, semibold and with a
   barely perceptible letter spacing. */
.page-title {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--title-blue);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 1.25rem;
}
.section-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--title-blue);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 1.25rem;
}
.article-item { margin-bottom: 2.5rem; }
.article-item h2 { font-size: 1.1rem; }
.article-item a { color: var(--title-blue); }

.page-links {
  margin-top: 2rem;
  font-size: 0.85rem;
}
.page-links a { color: var(--title-blue); }

/* ============================================================
   Image slider

   On the home the theme template renders this slider; the same rules
   also serve the static previews.
   ============================================================ */
.hero-slider { position: relative; }
/* The clipping is on the inner viewport, so the dots stay outside
   the image on a white background, as in the render. */
.slider-viewport {
  overflow: hidden;
  background: var(--dark-blue);
  line-height: 0;
}
.slider-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide { min-width: 100%; flex-shrink: 0; }
.slide img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
@media (min-width: 600px)  { .slide img { height: 380px; } }
@media (min-width: 1024px) { .slide img { height: 520px; } }

/* Arrows: white circle with a blue tip, as in the render */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--primary-blue);
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: background 0.2s;
}
.slider-btn:hover { background: #e8e8e8; }
.slider-btn.prev { left: 1rem; }
.slider-btn.next { right: 1rem; }

/* Dots below the image, on a white background */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 0;
  line-height: 1;
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c4c4c4;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s;
}
.dot.active { background: var(--primary-blue); }

/* ============================================================
   Course schedule — [kobukai_schedule] shortcode
   ============================================================ */
.schedule-wrap { margin-block: 1rem; }
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* In the render the table is all white: no solid blue rows, only thin
   blue-grey borders and black uppercase text. */
.schedule-table {
  border-collapse: collapse;
  min-width: 620px;
  width: 100%;
  font-size: 0.82rem;
  background: var(--white);
}
.schedule-table th,
.schedule-table td {
  border: 1px solid var(--table-border);
  padding: 0.7rem 0.7rem;
  text-align: center;
  vertical-align: middle;
  color: var(--text-grey);
}
.schedule-table thead th {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.01em;
}
/* In the render the top-left corner cell has no borders. */
.schedule-table thead th:first-child {
  border-top-color: transparent;
  border-left-color: transparent;
}
.schedule-table .time-cell {
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  font-size: 0.78rem;
  width: 1%;
}
.schedule-table .course-cell {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

/* ============================================================
   Clickable boxes (courses, about, masters…)
   ============================================================ */
.kobukai-box-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-block: 2rem;
}
@media (min-width: 640px) {
  .kobukai-box-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .kobukai-box-grid.col-2 { grid-template-columns: repeat(2, 1fr); }
  .kobukai-box-grid.col-3 { grid-template-columns: repeat(3, 1fr); }
  .kobukai-box-grid.col-4 { grid-template-columns: repeat(4, 1fr); }
}

/* In the render the boxes are flat: image, blue title, black text.
   No frame, no shadow, no background. */
.kobukai-box {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: opacity 0.25s;
}
.kobukai-box:hover { opacity: 0.85; }

.kobukai-box img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.kobukai-box-text { padding-top: 1.25rem; }
.kobukai-box h3 {
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--title-blue);
  margin: 0 0 0.75rem;
}
.kobukai-box p { font-size: 0.8rem; margin: 0 0 0.9rem; line-height: 1.55; }
.kobukai-box p:last-child { margin-bottom: 0; }

/* ============================================================
   Solid blue tile — the 3 MAESTRI / ALLENATORI / ATLETI boxes
   ============================================================ */
.kobukai-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--primary-blue);
  color: var(--white);
  text-decoration: none;
  text-align: center;
  padding: 1rem;
  transition: background 0.25s;
}
.kobukai-tile:hover,
.kobukai-tile:focus-visible { background: var(--dark-blue); }
.kobukai-tile span {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

/* ============================================================
   Person cards — masters, coaches, athletes
   ============================================================ */
.kobukai-person {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.25s;
}
a.kobukai-person:hover { opacity: 0.85; }
.kobukai-person img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.kobukai-person-name {
  margin: 1.1rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-grey);   /* in the render the name is black, not blue */
  letter-spacing: 0.01em;
}
/* Small blue label above the value: "ULTIMO GRADO RICEVUTO:" etc. */
.kobukai-detail { margin-top: 1rem; font-size: 0.78rem; line-height: 1.6; }
.kobukai-detail dt {
  color: var(--title-blue);
  text-transform: uppercase;
  font-weight: 400;
}
.kobukai-detail dd {
  margin: 0;
  text-transform: uppercase;
  color: var(--text-grey);
}

/* Athletes grid: 4 columns on desktop, 3 on tablet, 2 on phone */
.kobukai-athletes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1.25rem;
  margin-block: 2rem;
}
@media (min-width: 768px)  { .kobukai-athletes-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .kobukai-athletes-grid { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   Master profile: photo + bio, then columned lists
   ============================================================ */
.kobukai-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-block: 2rem;
}
@media (min-width: 768px) {
  .kobukai-card { grid-template-columns: minmax(220px, 28%) 1fr; align-items: start; }
}
.kobukai-card-name {
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--title-blue);
  margin: 0 0 0.6rem;
}
.kobukai-card-bio { font-size: 0.82rem; line-height: 1.6; }

.kobukai-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-block: 3rem;
}
@media (min-width: 640px)  { .kobukai-columns.col-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .kobukai-columns.col-3 { grid-template-columns: repeat(3, 1fr); } }

.kobukai-columns h3 {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-grey);   /* in the render these titles are black */
  margin: 0 0 1.25rem;
}
.kobukai-columns ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kobukai-columns li {
  font-size: 0.78rem;
  line-height: 1.5;
  margin-bottom: 1.1rem;
}

/* ============================================================
   Text content (paragraphs, quotes)
   ============================================================ */
.kobukai-text h2,
.kobukai-text h3 { color: var(--title-blue); }
.kobukai-text h3 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
/* In the render the quote is on a white background, centred and upright:
   no grey box, no italics. */
.kobukai-quote {
  max-width: 640px;
  margin-inline: auto;
  padding-block: 2.5rem;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.7;
}
.kobukai-quote cite {
  display: block;
  margin-top: 1.5rem;
  font-style: normal;
  text-align: right;
  color: var(--text-grey);
}
.kobukai-hero-image {
  display: block;
  width: 100%;
  max-height: 440px;
  object-fit: cover;
}

/* ============================================================
   Contact Form 7 (Contatti page)
   ============================================================ */
/* Blue panel: the render's form sits inside a solid blue rectangle, with
   white right-aligned labels and white fields.
   The Contact Form 7 markup to use is documented in the README. */
.kobukai-form-panel {
  background: var(--primary-blue);
  color: var(--white);
  padding: 2rem 1.25rem;
  margin-block: 1.5rem;
}
@media (min-width: 768px) { .kobukai-form-panel { padding: 3rem 2.5rem; } }

.kobukai-form-panel .field {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
  align-items: start;
}
@media (min-width: 768px) {
  .kobukai-form-panel .field {
    grid-template-columns: 190px 1fr;
    gap: 1.5rem;
  }
  .kobukai-form-panel .field > label { text-align: right; padding-top: 0.55rem; }
}
/* Beats `.wpcf7 label` below, which targets the form outside the blue panel. */
.kobukai-form-panel .field > label,
.kobukai-form-panel label {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--white);
  margin: 0;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid #ccc;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.9rem;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: var(--title-blue);
  box-shadow: 0 0 0 3px rgba(22, 98, 173, 0.25);
}
.wpcf7 label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.wpcf7 input[type="submit"] {
  background: var(--primary-blue);
  color: var(--white);
  border: none;
  padding: 0.7rem 2rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.2s;
}
.wpcf7 input[type="submit"]:hover { background: var(--dark-blue); }

/* Inside the blue panel the fields lose their border and the button inverts. */
.kobukai-form-panel .wpcf7 input[type="text"],
.kobukai-form-panel .wpcf7 input[type="email"],
.kobukai-form-panel .wpcf7 input[type="tel"],
.kobukai-form-panel .wpcf7 textarea {
  border: none;
  border-radius: 0;
}
.kobukai-form-panel .wpcf7 textarea { min-height: 200px; }
.kobukai-form-panel .wpcf7 input[type="submit"] {
  background: var(--white);
  color: var(--primary-blue);
  border-radius: 0;
  padding: 0.8rem 2.5rem;
  text-transform: uppercase;
  font-weight: 500;
}
.kobukai-form-panel .wpcf7 input[type="submit"]:hover { background: #e8e8e8; }

/* Final row: note on the left, button on the right */
.kobukai-form-panel .submit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
}
.kobukai-form-panel .required-note {
  font-size: 0.9rem;
  text-transform: uppercase;
  margin: 0;
}

/* The phone number: on desktop the click copies instead of calling. */
.tel-link { cursor: pointer; white-space: nowrap; }

.kobukai-contacts {
  font-style: normal;
  font-size: 0.9rem;
  line-height: 2;
}
.kobukai-contacts strong { color: var(--primary-blue); }
.kobukai-contacts a { color: var(--title-blue); }

/* Notice shown until the form has been connected */
.kobukai-notice {
  background: var(--light-grey);
  border: 2px dashed #ccc;
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  color: #777;
  font-size: 0.85rem;
}

/* Contatti page: text on the left, map on the right */
.contacts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .contacts-grid { grid-template-columns: 40% 1fr; align-items: start; }
}
/* Keeps the map's footprint visible even if the iframe fails to load. */
.map-box { background: #e9edf1; min-height: 360px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--primary-blue);
  color: var(--white);
  padding-top: 2.5rem;
  margin-top: 3rem;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
  align-items: start;
}
@media (min-width: 640px)  { .footer-inner { grid-template-columns: 170px 1fr; } }
@media (min-width: 1024px) { .footer-inner { grid-template-columns: 190px 1fr auto; } }

.footer-logo a { display: inline-block; text-decoration: none; }
.footer-logo img { display: block; height: 70px; width: auto; }

.footer-contacts p,
.footer-contacts ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* In the render the contact lines are all the same size, upright:
   "Contattaci" is not a heading, it is the first line of the list. */
.footer-contact-link { margin: 0; }
.footer-contacts,
.footer-details li { line-height: 1.7; font-size: 0.82rem; }

.site-footer a {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.82rem;
  text-decoration: none;
  transition: color 0.2s;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-legal ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-legal li { line-height: 1.9; }
.footer-legal span { font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); }
@media (min-width: 1024px) { .footer-legal { text-align: right; } }

.footer-bottom {
  background: var(--band-grey);
  padding: 0.9rem 0;
  text-align: center;
}
.footer-bottom p {
  margin: 0;
  font-size: 0.78rem;
  color: #555;
}

/* ============================================================
   "Back to top" button — on every page, scrolls with you
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  background: var(--primary-blue);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
  z-index: 150;
  box-shadow: var(--shadow);
}
.back-to-top svg { width: 24px; height: 24px; fill: currentColor; }
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.back-to-top:hover { background: var(--dark-blue); }

/* ============================================================
   Transient message (e.g. "Numero copiato negli appunti")
   ============================================================ */
.kobukai-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 12px);
  background: var(--dark-blue);
  color: var(--white);
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius);
  font-size: 0.85rem;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 300;
  max-width: calc(100vw - 2rem);
  text-align: center;
}
.kobukai-toast.visible { opacity: 1; transform: translate(-50%, 0); }

.kobukai-text { font-size: 0.85rem; line-height: 1.6; }

/* Label/value pairs in the coach cards */
.kobukai-columns-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kobukai-columns-list li {
  font-size: 0.78rem;
  line-height: 1.5;
  margin-bottom: 1.1rem;
}

/* ============================================================
   WordPress alignments
   ============================================================ */
.aligncenter { display: block; margin-inline: auto; }
.alignleft  { float: left;  margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}