/*
Theme Name: MDDW
Theme URI: https://lawsociety.example
Author: MDDW
Description: Custom theme for Lawsociety - domiciliation & coworking pour les professionnels du droit.
Version: 1.0.0
Text Domain: mddw
*/

/* ===== Fonts =====
   Weights below are the ones actually used in the source mockup
   (extracted from the vector PDF text layer), not a generic scale. */
@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}

/* ===== Design tokens =====
   Colors sampled directly from the vector fill values in the PDF source
   (jpg/site V5_01.ai export), not eyeballed from the compressed JPEG. */
:root {
  --color-bg: #f8f6f1;
  --color-surface: #ffffff;
  --color-dark: #3f2b24;
  --color-dark-soft: #5c4a40;
  --color-accent: #7f463a;
  --color-accent-light: #b79188;
  --color-text-muted: #6c6c6a;
  --color-border: #ece4dd;
  /* Warmer tan rule used by the Communauté panel dividers
     (sampled ~rgb(216,200,175) in site V53/V54.jpg). */
  --color-border-strong: #d8c8af;

  --font-base: "Outfit", "Helvetica Neue", Arial, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* The mockup's artboard is 428px wide; matching it exactly keeps every
     measurement below (taken at that width) accurate. */
  --content-max-width: 428px;

  /* Desktop only (see the min-width: 1080px block at the end of this file) */
  --wrap-max: 1080px;
}

/* ===== Reset ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
p,
ul,
figure,
dl,
dd {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-base);
  font-weight: 300;
  background-color: var(--color-bg);
  color: var(--color-dark);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button,
select {
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===== Layout shell ===== */
.page {
  max-width: var(--content-max-width);
  margin: 0 auto;
  background-color: var(--color-bg);
  overflow: hidden;
}

/* Sticky footer on basic content pages (index.php, body.page is WP's own
   Page-post-type class - unrelated to .page above): short text shouldn't
   leave the footer floating above the bottom of the viewport. Flex lives
   on .page itself (not body) so its own max-width/margin:auto sizing -
   and the desktop full-bleed override below - are completely untouched. */
body.page .page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.page main {
  flex: 1 0 auto;
}

.container {
  padding-inline: 35px;
}

/* Below the desktop breakpoint these are transparent to layout (their
   children behave as direct children of whatever mobile container they
   sit in, so the mobile markup below never has to know they exist). The
   min-width: 1080px block at the end of this file turns each one into a
   real box. */
.wrap,
.card-col,
.footer-cols,
.footer-brand {
  display: contents;
}

/* ===== Header ===== */
.site-header {
  position: relative;
}

.site-header__photo {
  width: 100%;
  height: 207px;
  object-fit: cover;
  display: block;
}

/* Decorative corner squares sitting at the photo/background seam */
.site-header__accent {
  position: absolute;
  left: 0;
  top: 198px;
  width: 30px;
  height: 10px;
  background-color: var(--color-dark);
}

.site-header__accent::after {
  content: "";
  position: absolute;
  left: 29px;
  top: 10px;
  width: 11px;
  height: 10px;
  background-color: var(--color-accent);
}

.site-header__brand {
  position: relative;
  margin-top: -47px;
  margin-left: 29px;
  width: 207px;
}

.site-header__logo {
  width: 207px;
  height: auto;
}

.site-header__tagline {
  margin-top: 9px;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  color: var(--color-dark);
}

/* ===== Tab navigation ===== */
.tab-nav {
  display: flex;
  gap: 28px;
  padding: 40px 35px 0;
  border-bottom: 1px solid var(--color-border);
}

.tab-nav__link {
  position: relative;
  padding-bottom: 13px;
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.tab-nav__link small {
  display: block;
  text-align: center;
  font-size: 10px;
  font-weight: 300;
}

.tab-nav__link[aria-current="page"] {
  color: var(--color-dark);
  font-weight: 700;
}

.tab-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 67%;
  height: 2px;
  background-color: var(--color-dark);
}

/* ===== Tab panels ===== */
.tab-panel {
  display: none;
  padding-top: 30px;
}

.tab-panel.is-active {
  display: block;
}

/* ===== Pricing card ===== */
.pricing-card {
  background-color: var(--color-surface);
  padding: 28px 0 32px 26px;
  margin-inline: 35px;
  margin-bottom: 42px;
}

.pricing-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 16px;
  padding-right: 0;
}

.pricing-card__title {
  font-size: 19px;
  line-height: 0.9;
  text-transform: uppercase;
}

.pricing-card__title span {
  display: block;
}

.pricing-card__title span:first-child {
  font-weight: 700;
}

.pricing-card__title span:last-child {
  font-weight: 300;
}

.pricing-card__badge {
  flex-shrink: 0;
  background-color: var(--color-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 9px 14px;
  text-align: center;
  white-space: nowrap;
}

.pricing-card__badge-group {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pricing-card__badge-caption {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 300;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-accent);
}

.pricing-card__badge-caption strong {
  font-weight: 700;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 28px;
}

.feature-list__item {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Icons share one square 50x50 viewBox; the visible glyph is already
   positioned/sized inside it by the source artwork, so the box is
   rendered at native size, never stretched to a different aspect ratio. */
.feature-list__icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

.feature-list__icon img {
  width: 100%;
  height: 100%;
}

.feature-list__label {
  font-size: 15px;
  font-weight: 300;
  color: var(--color-text-muted);
}

.feature-list__note {
  display: block;
  font-size: 12px;
  font-weight: 300;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.feature-list__note::before {
  content: "> ";
}

.pricing-card__rates {
  margin-top: var(--space-5);
  padding-right: 28px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.rate-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 300;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.rate-row__label {
  color: var(--color-text-muted);
}

.rate-row__value {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.pricing-card__footnote {
  margin-top: var(--space-3);
  margin-right: 28px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 10px;
  font-weight: 300;
  color: var(--color-text-muted);
}

/* ===== CTA / state button ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 9px 14px;
  border: none;
  cursor: pointer;
}

.btn--block {
  width: 100%;
}

.btn--muted {
  background-color: var(--color-accent-light);
  color: var(--color-dark);
}

/* ===== Community =====
   Two states on #communaute, driven server-side by is_user_logged_in()
   (front-page.php sets data-auth="in"/"out" at render time - there is
   no client-side auth toggle anymore, real WP login/logout replaces
   the earlier demo):
   - data-auth="out" (site V53.jpg): compact lawyer rows inside the shared
     white panel, separated by tan divider lines. No detail fields.
   - data-auth="in" (site V54.jpg): one white card per lawyer with the
     detail fields always visible below the identity row. */
#communaute[data-auth="out"] .lawyer-list {
  display: none;
}

#communaute[data-auth="in"] .lawyer-rows {
  display: none;
}

/* Same breathing room before the footer as the pricing tabs
   (their last card carries margin-bottom: 42px). */
#communaute {
  padding-bottom: 42px;
}

/* In the mockups the button's top edge sits flush with the panel's top
   edge (it hangs over the panel corner), so the toolbar takes no height
   of its own. */
.community-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  height: 0;
  margin: 0 35px;
  position: relative;
  z-index: 1;
}

.community-panel {
  background-color: var(--color-surface);
  margin-inline: 35px;
}

/* Logged-in: the panel closes shortly after the filter line */
#communaute[data-auth="in"] .community-panel {
  padding-bottom: 20px;
}

.community-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 66px 32px 48px;
  text-align: center;
}

/* Same native-size rule as .feature-list__icon */
.community-intro__icon {
  width: 50px;
  height: 50px;
}

.community-intro__title {
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 14px;
}

/* The filter's top/bottom rules are inset 33px, like every divider in
   this panel (they span x68-359 on the 428px artboard). */
.select-field-wrap {
  margin-inline: 33px;
  border-top: 1px solid var(--color-border-strong);
}

.select-field {
  width: 100%;
  padding: 6px 24px;
  border: none;
  border-bottom: 1px solid var(--color-border-strong);
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%233f2b24'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  font-size: 15px;
  font-weight: 300;
  text-align: center;
  color: var(--color-dark-soft);
  appearance: none;
}

/* --- Logged-out: compact rows in the shared panel --- */
.lawyer-rows {
  padding: 0 33px;
}

.lawyer-row {
  padding-block: 40px;
}

.lawyer-row + .lawyer-row {
  border-top: 1px solid var(--color-border-strong);
}

/* Expertise filter (js/main.js): hides non-matching lawyer-row/lawyer items */
.lawyer-row.is-hidden,
.lawyer.is-hidden {
  display: none;
}

/* --- Logged-in: one card per lawyer --- */
.lawyer-list {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: 48px;
}

.lawyer {
  background-color: var(--color-surface);
  margin-inline: 35px;
  padding: 24px 33px 36px;
}

/* --- Identity row, shared by both states --- */
.lawyer-card {
  display: flex;
  gap: 15px;
}

.lawyer-card__avatar {
  width: 80px;
  height: 112px;
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--color-accent);
}

.lawyer-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lawyer-card__role {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-dark-soft);
}

.lawyer-card__name {
  font-size: 16px;
  font-weight: 700;
  margin: 10px 0 6px;
}

.lawyer-card__name span {
  text-transform: uppercase;
}

.lawyer-card__specialty {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-muted);
}

.lawyer-card__socials {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

/* Thin vertical rule between the LinkedIn and Mail icons (per mockup) */
.lawyer-card__socials a + a {
  border-left: 1px solid var(--color-border-strong);
  padding-left: 10px;
}

.lawyer-card__socials img {
  width: 22px;
  height: 22px;
}

/* --- Detail fields (logged-in cards only, always visible) --- */
.lawyer-detail {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border-strong);
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-muted);
}

.lawyer-detail dt {
  color: var(--color-accent-light);
}

.lawyer-detail__row dd {
  margin-top: 2px;
}

.lawyer-detail__row--inline dt,
.lawyer-detail__row--inline dd {
  display: inline;
  margin: 0;
}

/* Whitespace between the inline label and its value ("Avocat depuis : 1998") */
.lawyer-detail__row--inline dt::after {
  content: " ";
}

.lawyer-detail__socials {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.lawyer-detail__socials img {
  width: 22px;
  height: 22px;
}

/* ===== Simple content template =====
   Generic text page (About, FAQ, Contact...): header kept, no tab-nav,
   just a title/text column and a link back to the tabbed front page.
   This is index.php - the theme's default fallback template. */
.simple-content {
  padding: 30px 35px 64px;
}

.simple-content h1 {
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.simple-content h2 {
  font-size: 19px;
  font-weight: 700;
  margin: var(--space-6) 0 var(--space-3);
}

.simple-content h3 {
  font-size: 16px;
  font-weight: 700;
  margin: var(--space-5) 0 var(--space-2);
}

.simple-content p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.simple-content ul {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: var(--space-4);
  text-align: left;
}

.simple-content li {
  font-size: 15px;
  font-weight: 300;
  margin-bottom: var(--space-2);
}

.simple-content a:not(.simple-content__back) {
  color: var(--color-accent);
  text-decoration: underline;
}

.simple-content__back {
  display: inline-flex;
  margin-top: var(--space-5);
}

/* ===== Footer ===== */
.site-footer {
  background-color: var(--color-dark);
  color: #fff;
  padding: var(--space-6) 35px;
}

.site-footer__logo {
  width: 140px;
  margin-bottom: var(--space-6);
}

.footer-feature {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 32px;
}

/* Same native-size rule as .feature-list__icon */
.footer-feature__icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

.footer-feature__title {
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.footer-feature__text {
  font-size: 16px;
  font-weight: 300;
  color: #e7e1da;
}

.footer-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: var(--space-5) 0;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
}

.footer-links a {
  color: #f1ece7;
}

/* ============================================================
   Desktop (>= 1080px)
   No mockup for this tier - direction came from a design consult,
   the rules themselves were written and verified by hand. Every rule
   above this block is the mobile build and is untouched; nothing
   below changes anything below the breakpoint. `.wrap`, `.card-col`,
   `.footer-cols` and `.footer-brand` are `display: contents` by
   default (declared with the layout shell above) so the extra markup
   they need is invisible to the mobile layout - each override below
   just turns them into a real box.

   Breakpoint value: chosen for the pricing-card row (the tightest
   constraint below) - three cards at a readable ~300px minimum, two
   32px gaps and the wrap's 40px side padding need 3*300 + 64 + 80 =
   1044px; 1080px gives that a little air without ballooning the gap
   between "still mobile" and "three comfortable cards". Header,
   nav, footer and Communauté aren't as width-sensitive so they just
   ride the same single jump. */
@media (min-width: 1080px) {
  .page {
    max-width: none;
    overflow: visible;
  }

  .wrap {
    display: block;
    max-width: var(--wrap-max);
    margin-inline: auto;
    padding-inline: 40px;
  }

  /* ===== Header =====
     Otherwise untouched beyond going full-bleed: the photo keeps its
     mobile height and the brand block (logo + tagline) and accent
     square keep their exact mobile layout, just against a wider photo -
     the same object, not a redesigned one. The one deliberate desktop
     change: drop the mobile 29px margin so the logo's left edge lines
     up with .wrap's 40px padding instead - the same edge every card
     and column below starts from.

     The accent square must move by that same amount, but it's NOT
     supposed to land flush with the logo - in mobile it sits 29px to
     the logo's left (square at left:0, brand at margin-left:29px), a
     deliberate slight peek-out under the card's corner. --header-inset
     is "wherever the logo's left edge now is"; the square stays offset
     -29px from that, preserving the mobile relationship instead of
     collapsing it. */
  .site-header {
    --header-inset: max(40px, calc((100% - var(--wrap-max)) / 2 + 40px));
  }

  .site-header__brand {
    margin-left: 0;
  }

  .site-header__accent {
    left: calc(var(--header-inset) - 29px);
  }

  /* ===== Tab nav ===== */
  .tab-nav {
    padding: 0;
  }

  .tab-nav .wrap {
    display: flex;
    justify-content: center;
    gap: 72px;
    padding-top: 56px;
  }

  .tab-nav__link {
    padding-bottom: 18px;
    font-size: 16px;
  }

  .tab-nav__link small {
    font-size: 12px;
  }

  /* Mobile has no hover surface to design for; desktop does. Only
     applies to inactive links - the active one keeps its own
     permanent underline below. */
  .tab-nav__link:not([aria-current="page"]):hover {
    color: var(--color-dark);
  }

  .tab-nav__link:not([aria-current="page"]):hover::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: 67%;
    height: 2px;
    background-color: var(--color-border-strong);
  }

  /* ===== Tab panels ===== */
  .tab-panel {
    padding-top: 56px;
    padding-bottom: calc(var(--space-6) * 2);
  }

  /* ===== Simple content template ===== */
  .simple-content {
    max-width: 720px;
    margin-inline: auto;
    padding-block: 96px;
  }

  /* ===== Pricing cards: plain row, not a quinconce =====
     All three (or four) cards side by side, sharing the row equally
     and shrinking together if the viewport is on the narrow end of
     this tier. `.card-col` reverts to `display: contents` here (same
     as mobile) so the cards are flat flex items of `.pricing-grid`
     regardless of which column-group div they're nested in. */
  .card-col {
    display: contents;
  }

  .wrap.pricing-grid {
    display: flex;
    align-items: flex-start;
    gap: 32px;
  }

  .pricing-card {
    flex: 1 1 0;
    min-width: 0;
    margin-inline: 0;
    margin-bottom: 0;
  }

  /* ===== Communauté =====
     Not worth a bespoke desktop layout - just keep it from stretching
     edge to edge like the wider tabs. Everything inside still uses its
     mobile CSS untouched. */
  #communaute .wrap {
    max-width: 600px;
  }

  /* ===== Footer =====
     Logo alone on its own row, then a three-column row below it: the
     two info blocks stacked in column 1, the site-plan link list
     spanning columns 2-3 (split into its own two sub-columns
     internally, not three) - top-aligned with column 1, i.e. with the
     140m² block, since the logo is no longer part of that column. */
  .site-footer__logo {
    margin-bottom: var(--space-6);
  }

  .footer-cols {
    display: grid;
    grid-template-columns: 240px 1fr 1fr;
    column-gap: 64px;
    align-items: start;
  }

  .footer-brand {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .footer-feature {
    margin-bottom: 0;
  }

  /* A horizontal rule doesn't read once the brand column and the link
     list sit side by side instead of stacked. */
  .footer-divider {
    display: none;
  }

  .footer-links {
    grid-column: 2 / span 2;
    display: block;
    columns: 2;
    column-gap: 48px;
  }

  .footer-links a {
    display: block;
    margin-bottom: 9px;
    break-inside: avoid;
  }
}