/* ==========================================================================
   PracticeTestSoftware Blog — core styles (tokens, base, header, footer)
   Every value here was pulled from the live site via DOM/computed-style
   inspection unless noted "approx" in a comment.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* Brand colours (exact, from live computed styles) */
  --pts-blue:        #2563eb; /* announcement bar bg + primary accent (blue-600) */
  --pts-blue-hover:  #1d4ed8; /* blue-700 (approx hover) */
  --pts-navy:        #1e3a8a; /* hero navy (approx — hero not used in blog chrome) */
  --pts-orange:      #c2410c; /* buttons + "PRACTICE TEST" wordmark (orange-700) */
  --pts-orange-hover:#9a3412; /* orange-800 (approx hover) */

  --pts-ink:         #171717; /* body text */
  --pts-heading:     #111827; /* footer/section headings (gray-900) */
  --pts-gray-700:    #374151; /* nav links + dropdown items (gray-700) */
  --pts-gray-600:    #4b5563; /* icons + footer links (gray-600) */
  --pts-gray-500:    #6b7280; /* muted meta (gray-500) */
  --pts-gray-200:    #e5e7eb; /* borders (gray-200) */
  --pts-gray-100:    #f3f4f6; /* hover fill / hairlines (gray-100) */
  --pts-gray-50:     #f9fafb; /* footer background (gray-50) */
  --pts-white:       #ffffff;

  /* Type — the main site sets font-family: Arial, Helvetica, sans-serif */
  --pts-font: Arial, Helvetica, sans-serif;
  --pts-base: 17px;           /* main site body 17.36px; blog body 17px */

  /* Layout */
  --pts-container: 1280px;    /* content column ≈1239px inside 32px padding */
  --pts-gutter: 32px;         /* nav/footer horizontal padding (px-8) */
  --pts-radius: 8px;
  --pts-radius-sm: 6px;       /* rounded-md dropdown panel */
  --pts-shadow-md: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --pts-shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);

  --pts-header-z: 50;
}

/* ---- Base ---------------------------------------------------------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--pts-font);
  font-size: var(--pts-base);
  line-height: 1.6;
  color: var(--pts-ink);
  background: var(--pts-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

.pts-container {
  max-width: var(--pts-container);
  margin-inline: auto;
  padding-inline: var(--pts-gutter);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  overflow: hidden; padding: 0; margin: -1px; border: 0;
  white-space: nowrap;
}

.pts-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--pts-blue); color: #fff; padding: 10px 16px; border-radius: 0 0 6px 0;
}
.pts-skip-link:focus { left: 0; }

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

/* ==========================================================================
   HEADER  — pixel clone of the main site chrome
   ========================================================================== */

/* Announcement bar: bg-blue-600, white, centred, py-2 (8px), 16px/500 */
.pts-announce {
  background: var(--pts-blue);
  color: var(--pts-white);
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  padding: 8px 16px;
  line-height: 1.4;
}
.pts-announce a { text-decoration: underline; }
.pts-announce strong { font-weight: 700; }

/* Nav bar: white, border-bottom 1px gray-200, sticky under the announce bar */
.pts-header {
  position: sticky;
  top: 0;
  z-index: var(--pts-header-z);
  background: var(--pts-white);
  border-bottom: 1px solid var(--pts-gray-200);
  box-shadow: var(--pts-shadow-sm);
}
.pts-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--pts-container);
  margin-inline: auto;
  padding: 10px var(--pts-gutter); /* py-2.5 px-8 */
  min-height: 60px;
}

/* Logo — displayed height 40px on the live site */
.pts-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.pts-logo img, .pts-logo svg { height: 40px; width: auto; display: block; }

/* Primary menu (centre) */
.pts-menu {
  display: flex;
  align-items: center;
  gap: 24px;               /* gap-6 between top-level items */
  margin-inline: auto;     /* pushes menu to centre, icons to right */
  list-style: none; padding: 0; margin-block: 0;
}
.pts-menu > li { position: relative; }

.pts-menu__link,
.pts-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--pts-font);
  font-size: 17px;
  font-weight: 500;
  color: var(--pts-gray-700);
  line-height: 1;
  padding: 8px 0;
  background: none; border: 0; cursor: pointer;
  transition: color .15s ease;
}
.pts-menu__link:hover,
.pts-menu__toggle:hover,
.pts-menu__link:focus-visible,
.pts-menu__toggle:focus-visible,
.pts-menu > li:hover > .pts-menu__link,
.pts-menu > li:hover > .pts-menu__toggle,
.pts-menu__link[aria-current="page"] {
  color: var(--pts-blue);
}
.pts-menu__caret {
  width: 16px; height: 16px; flex: 0 0 auto;
  transition: transform .18s ease;
}
.pts-menu > li[data-open="true"] .pts-menu__caret,
.pts-menu > li:hover .pts-menu__caret { transform: rotate(180deg); }

/* Dropdown panel — bg-white, rounded-md, shadow-lg, w-64 (256px) */
.pts-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 256px;
  background: var(--pts-white);
  border: 1px solid var(--pts-gray-100);
  border-radius: var(--pts-radius-sm);
  box-shadow: var(--pts-shadow-md);
  padding: 4px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 60;
}
.pts-menu > li:hover > .pts-dropdown,
.pts-menu > li:focus-within > .pts-dropdown,
.pts-menu > li[data-open="true"] > .pts-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* Two-column grid inside a category dropdown (grid-cols-2 gap-2 p-2) */
.pts-dropdown__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
}
.pts-dropdown__grid--single { grid-template-columns: 1fr; }

.pts-dropdown a {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--pts-gray-700);
  padding: 8px 16px;          /* py-2 px-4 */
  border-radius: 4px;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.pts-dropdown a:hover,
.pts-dropdown a:focus-visible { background: var(--pts-gray-100); color: var(--pts-blue); }

/* "View All Categories" footer row — separated by a top hairline (gray-100) */
.pts-dropdown__all {
  margin-top: 4px;
  border-top: 1px solid var(--pts-gray-100);
  padding-top: 4px;
}
.pts-dropdown__all a { font-weight: 500; }

/* Right-hand icon group — just search + mobile burger (cart/account omitted, see functions.php) */
.pts-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.pts-actions a, .pts-actions button {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--pts-gray-600);
  background: none; border: 0; cursor: pointer; padding: 6px;
  border-radius: 6px;
  transition: color .15s ease, background .15s ease;
}
.pts-actions a:hover, .pts-actions button:hover { color: var(--pts-blue); background: var(--pts-gray-100); }
.pts-actions svg { width: 20px; height: 20px; }

/* Inline blog search field revealed by the search icon */
.pts-search-bar {
  border-bottom: 1px solid var(--pts-gray-200);
  background: var(--pts-white);
  max-height: 0; overflow: hidden;
  transition: max-height .25s ease;
}
.pts-search-bar[data-open="true"] { max-height: 80px; }
.pts-search-bar form {
  display: flex; gap: 8px; align-items: center;
  max-width: var(--pts-container); margin-inline: auto;
  padding: 12px var(--pts-gutter);
}
.pts-search-bar input[type="search"] {
  flex: 1; font: inherit; font-size: 16px;
  padding: 10px 14px; border: 1px solid var(--pts-gray-200); border-radius: 6px;
}
.pts-search-bar button {
  font: inherit; font-weight: 600; color: #fff; background: var(--pts-blue);
  border: 0; border-radius: 6px; padding: 10px 18px; cursor: pointer;
}

/* Mobile hamburger + slide-down menu — hidden on desktop.
   Scoped to .pts-actions so they beat the `.pts-actions button/a` display rule. */
.pts-actions .pts-burger { display: none; }
.pts-mobile { display: none; }

/* ---- Buttons (shared) ---------------------------------------------------- */
.pts-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 16px; line-height: 1;
  padding: 10px 20px; border-radius: 4px; cursor: pointer;
  border: 1px solid transparent; transition: background .15s ease, color .15s ease;
}
.pts-btn--primary { background: var(--pts-orange); color: #fff; }      /* matches "Browse Categories" */
.pts-btn--primary:hover { background: var(--pts-orange-hover); color:#fff; }
.pts-btn--blue { background: var(--pts-blue); color: #fff; }
.pts-btn--blue:hover { background: var(--pts-blue-hover); }
.pts-btn--ghost { background: #fff; color: var(--pts-gray-700); border-color: var(--pts-gray-200); }
.pts-btn--ghost:hover { border-color: var(--pts-blue); color: var(--pts-blue); }

/* ==========================================================================
   FOOTER — clone of the main site footer
   bg gray-50, border-top gray-200
   ========================================================================== */
.pts-footer {
  background: var(--pts-gray-50);
  border-top: 1px solid var(--pts-gray-200);
  color: var(--pts-ink);
  margin-top: 64px;
}
.pts-footer__inner {
  max-width: var(--pts-container);
  margin-inline: auto;
  padding: 48px var(--pts-gutter) 0;
}

.pts-footer h3 {
  font-size: 18px; font-weight: 600; color: var(--pts-heading);
  margin: 0 0 16px;
}

/* Quick Links block (now the first section in the footer) */
.pts-footer__quick { padding-bottom: 32px; }
.pts-footer__quick-links {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px;
  list-style: none; padding: 0; margin: 0;
}
.pts-footer__quick-group { display: flex; flex-wrap: wrap; gap: 24px; }
.pts-footer__quick a { font-size: 17px; color: var(--pts-gray-600); transition: color .15s ease; }
.pts-footer__quick a:hover { color: var(--pts-blue); }

/* Bottom bar */
.pts-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--pts-gray-200);
}
.pts-footer__copy { font-size: 14px; color: var(--pts-gray-500); }
.pts-footer__legal { display: flex; align-items: center; gap: 24px; list-style: none; padding: 0; margin: 0; }
.pts-footer__legal a { font-size: 14px; color: var(--pts-gray-600); }
.pts-footer__legal a:hover { color: var(--pts-blue); }
.pts-footer__social { display: flex; align-items: center; gap: 14px; }
.pts-footer__social a { display: inline-flex; opacity: .85; transition: opacity .15s ease, transform .15s ease; }
.pts-footer__social a:hover { opacity: 1; transform: translateY(-1px); }
.pts-footer__social svg { width: 22px; height: 22px; border-radius: 4px; }

/* ==========================================================================
   RESPONSIVE — header + footer
   ========================================================================== */
@media (max-width: 900px) {
  .pts-menu { display: none; }
  .pts-actions .pts-burger {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; background: none; border: 0; cursor: pointer;
    color: var(--pts-gray-700); padding: 8px; border-radius: 6px;
  }
  .pts-burger svg { width: 26px; height: 26px; }

  /* Mobile slide-down menu */
  .pts-mobile {
    display: none;
    border-top: 1px solid var(--pts-gray-200);
    background: #fff;
    padding: 8px var(--pts-gutter) 16px;
  }
  .pts-mobile[data-open="true"] { display: block; }
  .pts-mobile ul { list-style: none; margin: 0; padding: 0; }
  .pts-mobile > ul > li { border-bottom: 1px solid var(--pts-gray-100); }
  .pts-mobile a, .pts-mobile .pts-mobile__toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    font: inherit; font-size: 17px; font-weight: 500; color: var(--pts-gray-700);
    padding: 14px 4px; background: none; border: 0; text-align: left; cursor: pointer;
  }
  .pts-mobile__sub { display: none; padding: 0 0 8px 16px; }
  .pts-mobile__sub[data-open="true"] { display: block; }
  .pts-mobile__sub a { font-size: 15px; font-weight: 400; color: var(--pts-gray-600); padding: 10px 4px; }
  .pts-mobile__caret { width: 18px; height: 18px; transition: transform .18s ease; }
  .pts-mobile__toggle[aria-expanded="true"] .pts-mobile__caret { transform: rotate(180deg); }
}

@media (max-width: 640px) {
  :root { --pts-gutter: 20px; }
  .pts-footer__quick-links { flex-direction: column; }
  .pts-footer__quick-group { flex-direction: column; gap: 12px; }
  .pts-footer__bottom { flex-direction: column; align-items: flex-start; }
  .pts-announce { font-size: 14px; }
}