/*
Theme Name: Kampala Music School Child
Template: kampala-music-school
Description: Child theme for Kampala Music School. All ongoing style tweaks (spacing, colors, layout adjustments) live here, so a future re-upload or update of the parent theme can never silently wipe them out.
Version: 1.0.0
Author: Kampala Music School
*/

/* --- Fees table styling (originally added directly to the fees table) --- */
table.fees{border-collapse:collapse;width:100%;margin:18px 0;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;font-family:var(--sans);box-shadow:var(--shadow)}
table.fees thead th{background:var(--red);color:#fff;text-align:left;padding:14px 16px;font-weight:700;font-size:13px;letter-spacing:.02em}
table.fees thead th:first-child{border-top-left-radius:14px}
table.fees thead th:last-child{border-top-right-radius:14px}
table.fees tbody td{padding:12px 16px;border-top:1px solid var(--line);font-size:14px;color:var(--ink)}
table.fees tbody td:first-child{font-weight:600}
table.fees tbody tr:nth-child(even){background:rgba(152,31,36,.04)}
@media (max-width:640px){table.fees{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* --- Eyebrow marker: chevron only on the first span, not every span
   inside an eyebrow label (fixes the double-chevron on the homepage
   "UPCOMING EVENT" banner) --- */
.eyebrow span:first-child::before{content:"\203A"}

/* --- Footer logo: smaller than the header logo --- */
.footer-logo {
  width: 105px;
  margin-bottom: 8px;
  filter: brightness(0) invert(1);
}

/* --- Footer divider lines: correctly disabled on tablet widths
   (the original rule had a CSS-specificity bug) plus a hard
   guarantee against horizontal scroll --- */
@media(max-width:900px){.footer-grid > div:not(:first-child)::before{content:none}}
.footer{overflow-x:hidden}

/* =========================================================
   WORDPRESS CONVERSION FIXES — consolidated
   Classes below were present in the page markup but had no
   matching CSS rule anywhere, so they were silently falling
   back to unstyled/default browser rendering.
   ========================================================= */

/* --- Fees page: section spacing (scoped to WP's own
   auto-generated template body class, not a hand-added one) --- */
.page-template-templates-template-fees-php .section{padding-top:12px!important;padding-bottom:12px!important}
.page-template-templates-template-fees-php .section-heading{margin-bottom:12px}
.page-template-templates-template-fees-php .section-heading p{margin-bottom:0}
@media (max-width:800px){.page-template-templates-template-fees-php .section{padding-top:8px!important;padding-bottom:8px!important}}

/* --- Fees page: centered section headings, table wrapper,
   the repairs "split" layout, and the plain info-list used
   for String Instrument Repairs. This is what was making the
   Instalment/Online-fees/Repairs sections look structureless. --- */
.section-heading.center{text-align:center}
.section-heading.center .eyebrow{justify-content:center}
.fees-note{color:var(--muted);font-size:14px;max-width:600px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0}
.table-wrap table.fees{margin:0}
.split-fees{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.info-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.info-list li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 17px}
.info-list li strong{display:block;font-size:16px;margin-bottom:3px}
.info-list li span{display:block;color:var(--muted);font-size:13px}
@media (max-width:800px){.split-fees{grid-template-columns:1fr;gap:20px}}

/* --- Footer: restore responsive column collapse on tablet/
   mobile (a later rule forces 5 columns at every width) --- */
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-grid > div:not(:first-child)::before{content:none}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}
}

/* --- Support page: letter card, payment box, support list --- */
.letter-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:40px;margin-bottom:50px}
.letter-card p{color:var(--ink);line-height:1.7;margin:0 0 16px}
.letter-card p:last-of-type{margin-bottom:0}
.payment-box{background:#fffaf2;border:1px solid #e3c9a5;border-radius:18px;padding:28px 32px;margin-top:28px}
.payment-box h3{font:700 18px var(--serif);margin:0 0 18px}
.payment-methods{display:flex;gap:20px;flex-wrap:wrap}
.payment-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 24px;flex:1;min-width:180px}
.payment-card strong{display:block;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.code{font:700 26px var(--serif);color:var(--red);letter-spacing:.02em}
.support-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.support-list>li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px;color:var(--muted);line-height:1.6}
.support-list>li>strong{display:block;font:700 18px var(--serif);color:var(--black);margin-bottom:8px}
.support-list ul{list-style:disc;margin-top:10px;padding-left:20px;font-size:14px}
.support-list ul li{margin:6px 0}
@media (max-width:600px){.letter-card{padding:26px}.payment-box{padding:22px}.payment-methods{flex-direction:column}.support-list>li{padding:20px}}

/* --- Homepage: hero "proof" stats (20+ Years / Various
   Instruments / All Ages) — was rendering as plain inline text --- */
.proof-item{display:flex;flex-direction:column;gap:2px}
.proof-item b{font:700 16px var(--serif);color:var(--black)}
.proof-item span{font-size:11px;color:var(--muted)}

/* --- Footer: social icon buttons (replaces plain text links
   in the "Connect with Us" column, now moved earlier in the
   footer for visibility) --- */
.footer-social-list{display:flex;gap:10px;flex-wrap:wrap}
.footer-social-icon{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:.2s}
.footer-social-icon:hover{background:var(--red)}
.footer-social-icon svg{width:17px;height:17px;fill:#fff}
.footer-phones{margin:0}
.footer-phones a{display:block}

/* Footer social: icon + handle name on one row */
.footer-social-list{display:flex;flex-direction:column;gap:9px}
.footer-social-item{display:flex!important;align-items:center;gap:9px;color:#b4b5b8;text-decoration:none;font-size:12px;margin:0!important}
.footer-social-item:hover{color:#fff}
.footer-social-item:hover .footer-social-icon{background:var(--red)}
.footer-social-icon{width:28px;height:28px;min-width:28px;border-radius:50%;background:rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;transition:.2s}
.footer-social-icon svg{width:14px;height:14px}
.footer-social-handle{white-space:nowrap}

/* Footer: logo + tagline stacked at the top of the column
   (natural position), horizontally centered within the
   column's own width. */
.footer-grid > div:first-child{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.footer-grid > div:first-child .footer-logo{
  margin-bottom: 0;
}
.footer-grid > div:first-child p{
  margin: 0;
}

/* Site-wide: reduce vertical spacing between page subsections.
   Overrides the base .section padding (was 92px / 65px mobile) —
   applies everywhere except the Fees page, which already has its
   own tighter, dedicated spacing rule in the parent theme. */
.section{padding:52px 0}
.section-heading{margin-bottom:28px}
@media (max-width:600px){.section{padding:36px 0}}

/* Teacher profile page: less space between the photo/name header
   and the bio content below it. */
.teacher-profile-hero.section{padding-bottom:24px}
.teacher-profile-hero + section.section{padding-top:24px}
@media (max-width:800px){
  .teacher-profile-hero.section{padding-bottom:16px}
  .teacher-profile-hero + section.section{padding-top:16px}
}

/* Fees page: left-align the subsection headings (Onsite term fees,
   Instalment & part-term rates, Online lesson fees, etc.) instead
   of centering them. ".center" is only ever used on this page. */
.section-heading.center{text-align:left}
.section-heading.center .eyebrow{justify-content:flex-start}

/* Teachers grid: show a hover overlay on the photo so it's clear it's
   clickable, since a plain link cursor alone is easy to miss on a photo. */
.teacher-avatar{position:relative;overflow:hidden}
.teacher-avatar::after{
  content:"View Profile →";
  position:absolute;
  inset:0;
  background:rgba(23,22,22,.6);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font:700 13px var(--sans);
  opacity:0;
  transition:opacity .25s ease;
}
.teacher-avatar:hover::after{opacity:1}

/* Topbar: social icons moved here from the footer, since the topbar
   appears on every page above the nav — more consistently visible
   than the footer, without crowding the header/nav itself. */
.topbar-inner{justify-content:space-between}
.topbar-event{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.topbar-social{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.topbar-social a{display:flex;opacity:.85;transition:opacity .2s}
.topbar-social a:hover{opacity:1}
.topbar-social svg{width:15px;height:15px}
@media (max-width:700px){.topbar-social{display:none}}

/* Fees page: larger text in the "How Fees Work" card — it's
   important information (registration fee, term policy) and was
   sized smaller than the surrounding page content. */
.fees-how-card>p{font-size:14px}
.fees-how-card .info-list li strong{font-size:17px}
.fees-how-card .info-list li span{font-size:14px}