/*
Theme Name: Chroma Care
Theme URI: https://chromacare.pk/
Author: Hassan Aziz
Description: Custom theme for Chroma Care (Private) Limited. Ships three selectable page templates - Classic, Noir and Storefront - each a complete standalone design. Assign one per page under Page Attributes > Template.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chroma-care
Tags: custom-colors, custom-menu, featured-images, full-width-template
*/

/* ============================================================
   This file carries only what is shared by all three designs.
   Each design's full stylesheet lives in assets/css/ and is
   enqueued on its own, so the three never load together and
   their identical class names can never collide.
   ============================================================ */

/* --- WP admin bar: fixed and sticky headers must clear it --- */
.admin-bar .hdr { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .hdr { top: 46px; }
}

/* --- wp_nav_menu compatibility -----------------------------
   The source designs used a bare <nav><a>...</a></nav>. WordPress
   outputs <nav class="nav"><ul class="nav-list"><li><a>. These
   rules make the generated list behave like the original flex row.
   `gap: inherit` picks up whatever gap each design set on .nav.
   ----------------------------------------------------------- */
.nav ul.nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: inherit;
}
.nav ul.nav-list li { margin: 0; }
.nav ul.nav-list ul { display: none; } /* theme nav is single level by design */

.ftr ul.menu,
.ftr ul.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .1rem;
}

/* --- shared mobile menu behaviour (all three break at 820px) --- */
@media (max-width: 820px) {
  .hdr.open .nav ul.nav-list {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0;
  }
  .hdr.open .nav ul.nav-list li { width: 100%; }
}

/* --- screen reader text (WP standard) --- */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip-path: none;
  height: auto;
  width: auto;
  display: block;
  top: 5px;
  left: 5px;
  padding: 15px 23px 14px;
  font-size: 1rem;
  z-index: 100000;
  background: #fff;
  color: #0A0F0E;
}

/* --- fallback for pages using the default page.php --- */
.cc-default {
  max-width: 48rem;
  margin-inline: auto;
  padding: clamp(40px, 6vw, 80px) max(20px, env(safe-area-inset-left, 0px));
  font-family: "Heebo", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #45534F;
}
.cc-default h1,
.cc-default h2,
.cc-default h3 {
  font-family: "Playfair Display", Georgia, serif;
  color: #111817;
  line-height: 1.15;
}
.cc-default a { color: #13A89F; }