/* ============================================================
   School-Products WordPress Theme — Modern Layer v1.0
   Additive override: loaded AFTER style.css via functions.php
   Scoped to theme chrome (.header, .footer, body > nav) to
   avoid colliding with Elementor page-builder content.
   SAFE TO REMOVE: de-enqueue 'school-products-modern' in
   functions.php to restore original appearance instantly.
   ============================================================ */

/* ============================================================
   1. BRAND TOKENS
   ============================================================ */
:root {
  --navy:      #003974;
  --teal:      #2bcaa5;
  --yellow:    #fbbf3d;
  --ink:       #2a2a2a;
  --muted:     #5a6374;
  --surface:   #f5f7fb;
  --border:    #dde2eb;
  --white:     #ffffff;
  --dark-bg:   #1e2733;
  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(0, 57, 116, 0.08);
  --shadow-md: 0 6px 24px rgba(0, 57, 116, 0.13);
  --t:         0.22s ease;
}

/* ============================================================
   2. BASE TYPOGRAPHY (global, safe — both theme + Elementor
      use the Catamaran stack defined in style.css)
   ============================================================ */
body {
  color: var(--ink);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}
a { transition: color var(--t); }

/* ============================================================
   3. HEADER — visual polish only, no layout/display changes
   ============================================================ */
.header {
  border-bottom: 2px solid var(--teal);
  box-shadow: 0 2px 12px rgba(0, 57, 116, 0.10);
}

/* ============================================================
   7. BASKET ICON — NOT modified (basket logic untouched)
      Only size/position refinements for mobile
   ============================================================ */
.basket-icon .basket-icon-relative span {
  font-size: 14px;
  width: 26px;
  height: 26px;
  line-height: 26px;
  border-radius: 50%;
  font-weight: 700;
}

/* ============================================================
   8. FOOTER — scoped to .footer / footer element
   ============================================================ */
.footer {
  background-color: var(--dark-bg);
  border-top: 3px solid var(--teal);
}
.footer .navigation-footer ul li a {
  transition: color var(--t);
  opacity: 0.85;
}
.footer .navigation-footer ul li a:hover {
  color: var(--yellow) !important;
  opacity: 1;
}
footer .border-left {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}
.copyright {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1em;
  line-height: 1.7;
}
.footer-link {
  color: var(--yellow) !important;
  transition: color var(--t);
}
.footer-link:hover {
  color: var(--teal) !important;
}
/* Social icons */
.social_icons a.socialIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t), opacity var(--t);
  margin: 0 4px;
}
.social_icons a.socialIcon:hover {
  transform: translateY(-3px);
  opacity: 0.85;
}
.social_icons img {
  width: 44px !important;
  height: 44px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   9. GLOBAL BUTTONS — scoped to outside Elementor content
      (.elementor-section resets these so overlap is minimal)
   ============================================================ */
a.blue-button,
a.green-button,
a.pink-button {
  border-radius: var(--radius-sm);
  transition: background var(--t), transform var(--t), box-shadow var(--t);
  letter-spacing: 0.02em;
}
a.blue-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 57, 116, 0.3);
}
a.green-button:hover {
  background: #23a88a;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(43, 202, 165, 0.35);
}
a.pink-button:hover {
  background: #e8ad2a;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(251, 191, 61, 0.35);
}

/* ============================================================
   10. CONTACT FORM / GENERAL FORMS
       (template-contact.php, template-info.php etc.)
   ============================================================ */
.contact-form-container input[type=text],
.contact-form-container input[type=email],
.contact-form-container textarea,
.contact-form-container select {
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.55em 0.8em;
  font-family: 'Catamaran', Helvetica, Arial, sans-serif;
  transition: border-color var(--t), box-shadow var(--t);
  background: var(--white);
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}
.contact-form-container input:focus,
.contact-form-container textarea:focus,
.contact-form-container select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(43, 202, 165, 0.18);
  outline: none;
}
.contact-form-container input[type=submit] {
  border-radius: var(--radius-sm);
  transition: background var(--t), transform var(--t);
  cursor: pointer;
}
.contact-form-container input[type=submit]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(43, 202, 165, 0.35);
}

/* Sample request form modernisation */
.request_sample_form.contact-form-container form input[type=text],
.request_sample_form.contact-form-container form input[type=email],
.request_sample_form.contact-form-container form select,
.request_sample_form.contact-form-container form textarea {
  min-height: 44px;
  font-size: 1.1em;
}

/* ============================================================
   11. MODAL POPUP (Sample request etc.)
   ============================================================ */
.modal-popup {
  background: rgba(0, 57, 116, 0.55) !important;
  backdrop-filter: blur(4px);
}
.modal-popup .white-container {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ============================================================
   12. HEADER BANNER (page hero)
   ============================================================ */
.header-banner {
  border-bottom: 3px solid var(--teal);
}

/* ============================================================
   13. PAGINATION
   ============================================================ */
.pagination a {
  transition: background var(--t), color var(--t), border-color var(--t);
}
.pagination a:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* ============================================================
   14. TEMPLATE-SPECIFIC IMPROVEMENTS
       CSS class-based overrides only — no PHP edits
   ============================================================ */

/* Contact page heading */
.contact-header {
  color: var(--navy);
  margin-bottom: 0.5em;
  font-size: 3em;
}

/* Contact page top padding on main — reduce on mobile
   (template sets padding-top:10em inline; we use !important only
   inside media queries so desktop is unaffected) */

/* Privacy Policy / Terms / Plain page content */
.page-pusher main,
main.page-pusher {
  line-height: 1.7;
}

/* Info & plain templates: improve paragraph readability */
.maincontent p,
.content-padding p {
  font-size: 1.6em;
  line-height: 1.75;
}
.maincontent h1,
.maincontent h2 {
  color: var(--navy);
}

/* Product information template: clean up CTA buttons */
.addButton {
  border-radius: var(--radius-sm);
  transition: background var(--t), transform var(--t);
}
.addButton:hover {
  transform: translateY(-1px);
}

/* Planner / pricing table: card hover effect */
.pricing-table .boxes {
  transition: transform var(--t), box-shadow var(--t);
  border-radius: var(--radius-sm);
}
.pricing-table .boxes:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

/* Search results page */
.search-article {
  border-bottom: 2px solid var(--border);
  padding-bottom: 1.5em;
}

/* Knowledgebase / KB articles */
.knowledgebase-container .grid_9 h1 {
  color: var(--navy);
}

/* 404 / error page */
.errorpage {
  text-align: center;
}

/* ============================================================
   RESPONSIVE — TABLET (≤ 780px)
   ============================================================ */
@media only screen and (max-width: 780px) {

  /* Logo on small screens */
  .header .logo a img { height: 38px !important; }

  /* Footer columns stack gracefully (already in style.css,
     we add visual improvements) */
  footer .navigation-footer ul li {
    padding: 0.3em 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  footer .navigation-footer ul li a {
    font-size: 1em !important;
    padding: 0.5em 0;
    display: block;
  }
  .social_icons {
    margin-top: 1.5em;
    display: flex;
    justify-content: center;
    gap: 12px;
  }
  .social_icons img { width: 42px !important; height: 42px; }

  /* Template page improvements */
  .maincontent { padding: 2.5em 0; }
  .content-padding { padding: 1.5em !important; }
  /* Override contact page inline padding-top:10em on mobile */
  main[role=main][style*="padding-top"] { padding-top: 6em !important; }
  .contact-header { font-size: 2em; }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 480px)
   ============================================================ */
@media only screen and (max-width: 480px) {

  /* Inputs meet 16px / 48px touch guidelines */
  .contact-form-container input[type=text],
  .contact-form-container input[type=email],
  .contact-form-container textarea,
  .contact-form-container select,
  .request_sample_form.contact-form-container form input,
  .request_sample_form.contact-form-container form select {
    min-height: 48px !important;
    font-size: 16px !important;
  }
  .contact-form-container input[type=submit] {
    min-height: 48px;
    font-size: 16px;
    width: 100%;
  }

  /* Mobile basket icon counter badge */
  .basket-icon .basket-icon-relative span {
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
  }
}