/*
Theme Name: HPJ Elegant
Theme URI: https://hpj.is/
Author: OpenAI for Geðlæknastofa HPJ
Description: A clean, warm, responsive WordPress theme created for Geðlæknastofa HPJ. Uses the clinic's real office photograph and preserves the existing patient/referrer/general-information structure.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: hpj-elegant
*/

:root {
  --hpj-bg: #f7f3ec;
  --hpj-paper: #fbf8f3;
  --hpj-paper-2: #f0ebe2;
  --hpj-ink: #20221c;
  --hpj-muted: #65685e;
  --hpj-olive: #697357;
  --hpj-olive-dark: #545f46;
  --hpj-gold: #b88c2d;
  --hpj-border: #ddd5c9;
  --hpj-shadow: 0 14px 40px rgba(42, 37, 27, .08);
  --hpj-radius: 18px;
  --hpj-width: 2260px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--hpj-bg);
  color: var(--hpj-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }

.hpj-wrap {
  width: min(calc(100% - 7.5rem), var(--hpj-width));
  margin-inline: auto;
}

/* Header */
.site-header {
  position: relative;
  z-index: 40;
  background: rgba(251, 248, 243, .98);
  border-bottom: 1px solid rgba(80, 72, 55, .08);
}
.site-header__inner {
  min-height: 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.site-branding { flex: 0 0 auto; }
.site-title {
  display: inline-block;
  color: #171914;
  text-decoration: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 1.75vw, 34px);
  line-height: 1;
  letter-spacing: -.02em;
}
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo { display:block; max-height:72px; max-width:180px; width:auto !important; height:auto !important; object-fit:contain; }

.primary-nav { margin-left: auto; }
.primary-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(25px, 3.3vw, 58px);
}
.primary-nav li { position: relative; }
.primary-nav a {
  text-decoration: none;
  color: #2d3029;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  padding: 12px 0;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a { color: #11130f; }
.primary-nav .current-menu-item > a::after,
.primary-nav .current_page_item > a::after,
.primary-nav a:hover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  background: var(--hpj-gold);
}
.primary-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%; left: -18px;
  min-width: 280px;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--hpj-border);
  border-radius: 10px;
  box-shadow: var(--hpj-shadow);
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu { display: block; }
.primary-nav .sub-menu a { display: block; padding: 8px 0; }

.nav-toggle {
  display: none;
  border: 1px solid var(--hpj-border);
  background: transparent;
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 15px;
}

/* Home hero */
.hpj-hero {
  min-height: 515px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #e9e3da;
}
.hpj-hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--hpj-hero-image);
  background-size: cover;
  background-position: 60% 53%;
}
.hpj-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(248, 245, 239, 1) 0%,
    rgba(248, 245, 239, .99) 23%,
    rgba(248, 245, 239, .92) 34%,
    rgba(248, 245, 239, .45) 48%,
    rgba(248, 245, 239, .04) 65%,
    rgba(248, 245, 239, 0) 100%);
}
.hpj-hero__inner {
  min-height: 515px;
  display: flex;
  align-items: center;
  padding: 54px 0 90px;
}
.hpj-hero__content { width: min(810px, 48%); }
.hpj-hero h1 {
  margin: 0 0 2px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.04;
  font-size: clamp(48px, 4vw, 72px);
  letter-spacing: -.025em;
}
.hpj-hero .hpj-doctor {
  margin: 0 0 28px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 2vw, 34px);
  color: #484b44;
}
.hpj-intro {
  max-width: 745px;
  font-size: clamp(16px, 1.15vw, 20px);
  line-height: 1.48;
  color: #30332d;
}
.hpj-intro strong { font-weight: 700; }

/* 2–4 editable pathways */
.hpj-pathways {
  position: relative;
  z-index: 5;
  margin-top: -48px;
}
.hpj-pathway-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.hpj-pathway-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hpj-pathway-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hpj-pathway-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hpj-card {
  display: flex;
  flex-direction: column;
  min-height: 335px;
  background: rgba(252, 250, 246, .98);
  border: 1px solid var(--hpj-border);
  border-radius: var(--hpj-radius);
  padding: 30px 34px;
  box-shadow: var(--hpj-shadow);
}
.hpj-card__top { display: flex; align-items: flex-start; gap: 24px; }
.hpj-card__number {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eee8dc;
  color: #373b30;
  font-weight: 700;
  font-size: 14px;
}
.hpj-card h2 {
  margin: 3px 0 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(26px, 1.85vw, 34px);
  line-height: 1.08;
}
.hpj-card p { margin: 0 0 12px; color: #55584f; }
.hpj-card__content p { font-size: 14px; line-height: 1.45; }
.hpj-card__content p strong { font-weight: 800; }
.hpj-card__content ul { margin: 8px 0 12px; padding-left: 20px; }
.hpj-card .hpj-warning {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 800;
  text-transform: uppercase;
  color: #37392f;
}
.hpj-card .hpj-small { font-size: 14px; line-height: 1.45; }
.hpj-card__actions { margin-top: auto; padding-top: 18px; }
.hpj-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 210px;
  min-height: 52px;
  padding: 12px 22px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid transparent;
  background: var(--hpj-olive);
  color: #fff;
  font-weight: 700;
  transition: .18s ease;
}
.hpj-button:hover { background: var(--hpj-olive-dark); transform: translateY(-1px); }
.hpj-button--quiet {
  color: #373b32;
  background: #e9e2d7;
  border-color: #ded4c6;
}
.hpj-button--quiet:hover { background: #ddd4c6; }

/* Important info */
.hpj-important { padding: 26px 0 34px; }
.hpj-important__panel {
  border: 1px solid #d8d0c4;
  border-radius: var(--hpj-radius);
  background: #eee9e1;
  padding: 30px 36px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
}
.hpj-important h2,
.hpj-important h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.16;
}
.hpj-important h2 { font-size: clamp(28px, 2vw, 36px); margin: 0 0 16px; }
.hpj-important h3 { font-size: clamp(21px, 1.45vw, 26px); margin: 3px 0 14px; }
.hpj-important p { margin: 0 0 14px; }
.hpj-important ul { margin: 0; padding-left: 22px; }
.hpj-important li { margin: 8px 0; }
.hpj-important__adhd {
  border-left: 1px solid #d3cabd;
  padding-left: 36px;
}

/* General pages */
.site-main { min-height: 58vh; }
.page-hero {
  background: #ece6dc;
  padding: 54px 0;
  border-bottom: 1px solid var(--hpj-border);
}
.page-hero h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(42px, 4vw, 66px);
}
.entry-shell {
  width: min(calc(100% - 7.5rem), var(--hpj-entry-width, 1500px));
  margin: 46px auto 70px;
  background: #fffdf9;
  border: 1px solid var(--hpj-border);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 64px);
  box-shadow: 0 10px 30px rgba(42, 37, 27, .05);
}
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}
.entry-content a { color: #4f6146; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.entry-content th,
.entry-content td { border-bottom: 1px solid #ddd5c9; padding: 14px 12px; text-align: left; vertical-align: top; }
.entry-content th { background: #f1ece3; }

.post-password-form {
  max-width: 620px;
  margin: 10px 0;
  padding: 26px;
  border: 1px solid var(--hpj-border);
  border-radius: 12px;
  background: #f7f3ec;
}
.post-password-form label { display: block; font-weight: 600; }
.post-password-form input[type="password"] {
  width: 100%;
  margin: 9px 0 12px;
  padding: 12px 14px;
  border: 1px solid #cfc7ba;
  border-radius: 7px;
  font-size: 16px;
}
.post-password-form input[type="submit"] {
  border: 0;
  border-radius: 7px;
  background: var(--hpj-olive);
  color: #fff;
  padding: 12px 20px;
  font-weight: 700;
  cursor: pointer;
}

/* Optional cleanup of navigation/page-list blocks embedded in page content */
.hpj-hide-content-navigation .entry-content nav.wp-block-navigation,
.hpj-hide-content-navigation .entry-content .wp-block-navigation,
.hpj-hide-content-navigation .entry-content .wp-block-page-list,
.hpj-hide-content-navigation .entry-content .wp-block-navigation__container {
  display: none !important;
}

/* Footer */
.site-footer {
  background: #e7e0d5;
  border-top: 1px solid #d8d0c4;
  padding: 25px 0;
  color: #44483f;
  font-size: 14px;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.35fr 1fr .65fr .65fr;
  gap: 28px;
  align-items: center;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Accessibility */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #c99f45;
  outline-offset: 3px;
}

@media (max-width: 1180px) {
  .hpj-wrap { width: min(calc(100% - 3rem), var(--hpj-width)); }
  .site-header__inner { min-height: 86px; gap: 20px; }
  .primary-nav ul { gap: 18px; }
  .primary-nav a { font-size: 14px; }
  .hpj-hero__content { width: 57%; }
  .hpj-card { padding: 26px; }
  .hpj-pathway-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-block; }
  .primary-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fbf8f3;
    border-top: 1px solid var(--hpj-border);
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    display: none !important;
  }
  .primary-nav.is-open { display: block !important; }
  .primary-nav ul { display: block; padding: 12px 24px 20px; }
  .primary-nav a { display: block; padding: 12px 0; }
  .primary-nav .sub-menu { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 0 16px; background: transparent; }

  /* Mobile hero: keep the office image visible, but place all introductory
     text on a nearly opaque paper panel so it never blends into the photo. */
  .hpj-hero { min-height: 0; }
  .hpj-hero__inner {
    min-height: 0;
    align-items: flex-end;
    padding-top: clamp(230px, 54vw, 330px);
    padding-bottom: 72px;
  }
  .hpj-hero__photo { background-position: 58% 42%; }
  .hpj-hero::after {
    background: linear-gradient(180deg,
      rgba(248,245,239,.04) 0%,
      rgba(248,245,239,.08) 34%,
      rgba(248,245,239,.34) 60%,
      rgba(248,245,239,.78) 82%,
      rgba(248,245,239,.96) 100%);
  }
  .hpj-hero__content {
    width: 100%;
    max-width: 760px;
    padding: 28px 26px;
    background: rgba(251,248,243,.97);
    border: 1px solid rgba(116,104,82,.18);
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(42,37,27,.12);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }
  .hpj-pathway-grid,
  .hpj-pathway-grid--2,
  .hpj-pathway-grid--3,
  .hpj-pathway-grid--4 { grid-template-columns: 1fr; }
  .hpj-pathways { margin-top: -70px; }
  .hpj-card { min-height: 0; }
  .hpj-important__panel { grid-template-columns: 1fr; }
  .hpj-important__adhd { border-left: 0; border-top: 1px solid #d3cabd; padding: 24px 0 0; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .entry-shell { width: min(calc(100% - 3rem), 1500px); }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .hpj-wrap, .entry-shell { width: min(calc(100% - 2rem), var(--hpj-width)); }
  .site-header__inner { min-height: 76px; }
  .site-title { font-size: 23px; }
  .hpj-hero__inner { padding-top: 220px; padding-bottom: 58px; }
  .hpj-hero__photo { background-position: 60% 38%; }
  .hpj-hero__content { padding: 22px 18px; border-radius: 14px; }
  .hpj-hero h1 { font-size: clamp(34px, 10.5vw, 42px); }
  .hpj-hero .hpj-doctor { margin-bottom: 20px; font-size: clamp(20px, 6.2vw, 24px); }
  .hpj-intro { font-size: 15px; line-height: 1.5; }
  .hpj-pathways { margin-top: -34px; }
  .hpj-card { padding: 24px 20px; border-radius: 14px; }
  .hpj-card__top { gap: 16px; }
  .hpj-important__panel { padding: 24px 20px; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 720px) {
  .custom-logo { max-height:58px; max-width:150px; }
}