/*
Theme Name: GPC Maths Tuition
Theme URI: https://gpcmathstuition.com
Author: GPC Maths Tuition
Description: A bespoke theme for GPC Maths Tuition, Sector 12, Noida. Olive and moss on warm ivory, Cormorant Garamond display type, a particle hero that morphs through mathematical shapes, and live integration and differentiation explainers. Built with no page builder and no premium plugins.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gpc
Tags: education, one-column, custom-logo, custom-menu, translation-ready
*/

/* The bulk of the design lives in assets/css/main.css, which is enqueued
   before this file. What follows is everything WordPress itself needs:
   inner pages, editor output, and accessibility helpers. */

/* -------------------------------------------------------------------------
   Accessibility
   ---------------------------------------------------------------------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--orange);color:var(--on-orange);
  font-family:"Plus Jakarta Sans",sans-serif;font-size:14px;font-weight:700;
  padding:12px 20px;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;
  margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal!important;
}
.brandlink{display:inline-flex;align-items:center}

/* -------------------------------------------------------------------------
   Site header
   The same arrangement the front page carries inside its hero -- logo, the
   local time and place, the menu, one action -- so that a visitor arriving on
   a subject page and one arriving on the home page see the same thing. It
   sticks here, which the hero version has no need to do: there is nothing
   above an inner page to scroll back to.
   ---------------------------------------------------------------------- */
.pagehead{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
.pagehead .topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:18px 32px;
}
.pagehead img{height:42px;width:auto}

/* Away from the hero there are no --h-* tokens, so the nav takes the page's
   own ink. Sizes, spacing and weight all come from .hnav, unchanged. */
.pagehead .hnav a{color:var(--ink-soft)}
.pagehead .hnav a:hover{color:var(--ink)}
.pagehead .hnav a.btn-orange{color:var(--on-orange)}
.pagehead .hnav a.btn-glass{color:var(--ink)}
.pagehead .hnav a.btn-wa{color:var(--wa-ink)}
.pagehead .nav-toggle{border-color:var(--rule);color:var(--ink)}
.pagehead .sub-menu{background:var(--panel);border-color:var(--rule)}
.pagehead .sub-menu a{color:var(--ink-soft)}
.pagehead .sub-menu a:hover{color:var(--ink)}


/* -------------------------------------------------------------------------
   Long-form pages — About, Privacy, Terms
   ---------------------------------------------------------------------- */
.entry{max-width:70ch;margin:0 auto;padding:72px 0 0}
.entry-head{display:flex;flex-direction:column;gap:14px;margin-bottom:40px;
  padding-bottom:28px;border-bottom:1px solid var(--rule)}
.entry-head h1{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:clamp(38px,5.4vw,66px);line-height:1.0;letter-spacing:-.016em;
}
.entry-byline{font-size:14.5px;color:var(--ink-soft)}
.entry-byline a{color:var(--blue);border-bottom:1px solid color-mix(in srgb,var(--blue) 35%,transparent)}
.entry-byline a:hover{border-color:var(--blue)}

.entry-meta{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

.entry-body{font-size:17px;line-height:1.72;color:var(--ink-soft)}
.entry-body > * + *{margin-top:1.15em}
.entry-body h2{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;color:var(--ink);
  font-size:clamp(26px,3.4vw,38px);line-height:1.1;letter-spacing:-.014em;
  margin-top:2.2em;
}
.entry-body h3{
  font-family:"Plus Jakarta Sans",ui-sans-serif,sans-serif;font-weight:600;color:var(--ink);
  font-size:19px;line-height:1.3;letter-spacing:-.012em;margin-top:1.9em;
}
.entry-body h4{font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;color:var(--ink);font-size:16.5px;margin-top:1.6em}
.entry-body strong{color:var(--ink);font-weight:600}
.entry-body a{color:var(--blue);border-bottom:1px solid color-mix(in srgb,var(--blue) 35%,transparent)}
.entry-body a:hover{border-color:var(--blue)}
.entry-body ul,.entry-body ol{padding-left:1.3em;display:flex;flex-direction:column;gap:.55em}
.entry-body li{padding-left:.2em}
.entry-body li::marker{color:var(--blue)}
.entry-body blockquote{
  border-left:3px solid var(--orange);padding:6px 0 6px 22px;margin-left:0;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:21px;font-style:italic;color:var(--ink);
}
.entry-body hr{border:0;height:1px;background:var(--rule);margin:2.4em 0}
.entry-body code{
  font-family:"IBM Plex Mono",monospace;font-size:.88em;
  background:color-mix(in srgb,var(--blue) 8%,transparent);
  padding:2px 6px;border-radius:4px;color:var(--ink);
}
.entry-body table{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.entry-body th,.entry-body td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule-soft)}
.entry-body th{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:400}
.entry-body img{max-width:100%;height:auto;border-radius:14px}
.entry-body figcaption{font-size:13px;color:var(--ink-faint);margin-top:8px}

.page-links{margin-top:2em;display:flex;gap:10px;font-family:"IBM Plex Mono",monospace;font-size:12px}

/* closing call to action on inner pages */
.entry-cta{
  max-width:70ch;margin:76px auto 0;background:var(--panel);
  border:1px solid var(--rule);border-left:4px solid var(--orange);border-radius:18px;
  padding:32px 34px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;
  box-shadow:var(--sh-sm);
}
.entry-cta h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:30px;line-height:1.06;color:var(--ink)}
.entry-cta p{font-size:15px;color:var(--ink-soft);max-width:52ch}

/* -------------------------------------------------------------------------
   Review quote block on the home page
   ---------------------------------------------------------------------- */
.voice{
  margin-top:52px;background:var(--panel);border:1px solid var(--rule);border-radius:22px;
  box-shadow:var(--sh-sm);padding:38px 42px;
  display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;
}
.voice .q{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(21px,2.6vw,30px);line-height:1.3;letter-spacing:-.01em;
  color:var(--ink);margin:0;
}
.voice .meta{display:flex;flex-direction:column;gap:5px;align-items:flex-end;text-align:right}
.voice .sm{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)}

/* -------------------------------------------------------------------------
   404 / search
   ---------------------------------------------------------------------- */
.notfound{max-width:60ch;margin:0 auto;padding:120px 0 0;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:16px}
.notfound h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:clamp(44px,7vw,86px);line-height:1;letter-spacing:-.02em}
.notfound p{font-size:16.5px;color:var(--ink-soft)}

@media (max-width:940px){
  .pagehead .topbar{padding:13px 20px}
  .pagehead img{height:34px}
  .voice{grid-template-columns:1fr;gap:20px;padding:28px 26px}
  .voice .meta{align-items:flex-start;text-align:left}
  .entry{padding-top:48px}
  .entry-cta{padding:26px 24px}
}

/* call-to-action rows that hold more than one button */
.cta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* -------------------------------------------------------------------------
   Contact page and enquiry form
   ---------------------------------------------------------------------- */
.contact-head{max-width:64ch;padding:72px 0 0;display:flex;flex-direction:column;gap:14px}
.contact-head h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:clamp(38px,5.4vw,66px);line-height:1;letter-spacing:-.016em}
.contact-intro{font-size:17px;line-height:1.7;color:var(--ink-soft)}
.contact-intro p + p{margin-top:1em}

.contact-grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:44px;
  margin-top:46px;align-items:start}
.contact-details,.contact-formwrap{background:var(--panel);border:1px solid var(--rule);
  border-radius:20px;padding:30px 32px;box-shadow:var(--sh-sm)}
.contact-details h2,.contact-formwrap h2{font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:300;font-size:28px;line-height:1.1;margin-bottom:18px}
.contact-lead{font-size:15px;color:var(--ink-soft);margin-bottom:22px;max-width:56ch}

/* form */
.enquiry-form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.field .req{color:var(--orange)}
.field .opt{text-transform:none;letter-spacing:0;font-size:10.5px;opacity:.75}
.field input,.field select,.field textarea{
  font-family:"Plus Jakarta Sans",ui-sans-serif,sans-serif;color:var(--ink);
  /* 16px is not a taste decision. iOS Safari zooms the whole page in when a
     field smaller than 16px takes focus, and it does not zoom back out — so
     15.5px meant every parent filling this in on an iPhone got thrown to
     120% on the first tap and had to pinch out to carry on. */
  font-size:16px;
  background:var(--paper);border:1px solid var(--rule);border-radius:11px;
  padding:12px 14px;width:100%;transition:border-color .2s,box-shadow .2s;
}
.field textarea{resize:vertical;min-height:104px;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 16%,transparent);
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);opacity:.8}

.enquiry-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.enquiry-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px}
.enquiry-small{font-size:12.5px;color:var(--ink-faint);margin-top:2px}

.enquiry-note{border-radius:14px;padding:16px 20px;margin-bottom:22px;font-size:14.5px;
  line-height:1.6;border:1px solid var(--rule)}
.enquiry-note strong{display:block;margin-bottom:3px;color:var(--ink)}
.enquiry-note.is-good{background:color-mix(in srgb,var(--wa) 12%,transparent);
  border-color:color-mix(in srgb,var(--wa) 40%,transparent);color:var(--ink-soft)}
.enquiry-note.is-bad{background:color-mix(in srgb,var(--orange) 12%,transparent);
  border-color:color-mix(in srgb,var(--orange) 45%,transparent);color:var(--ink-soft)}

@media (max-width:940px){
  .contact-grid{grid-template-columns:1fr;gap:20px;margin-top:32px}
  .contact-head{padding-top:44px}
  .contact-details,.contact-formwrap{padding:24px 22px}
  .field-row{grid-template-columns:1fr}
}