/* ── Branding — André Moreira Fotografia ─────────────────────────
 *
 * Tenant theme: dark green-grey surface, warm cream ink, Cormorant +
 * Poppins + Montserrat trio. The original / default theme of the
 * platform.
 *
 * Activation is now `.env`-driven — each install sets `BRAND=andmore`
 * and the head files load this file automatically. No per-install
 * copying or renaming required.
 *
 * Both `assets/css/style.css` (backoffice) and `site/includes/head.php`
 * (public site) consume the `--am-*` tokens defined below via var().
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Montserrat:wght@300;400;500;600;700&family=Poppins:wght@200;300;400;500;600&display=swap');

:root {
  /* Colours */
  --am-bg:          #161c18;
  --am-bg-alt:      #1e2420;
  --am-bg-card:     #1c2320;
  --am-bg-navy:     #161a2c;
  --am-text:        #cbbfb0;
  --am-text-muted:  #958D86;
  --am-text-dim:    #65574E;
  --am-base:        #D6D2CE;
  --am-base-2:      #E1DFDB;
  --am-contrast:    #1a1713;
  --am-border:      rgba(203, 191, 176, 0.15);
  --am-border-soft: rgba(203, 191, 176, 0.08);

  /* Typography */
  --am-font-body:    'Poppins', sans-serif;
  --am-font-heading: 'Cormorant', serif;
  --am-font-sub:     'Montserrat', sans-serif;

  /* Font sizes (structural — usually safe to keep) */
  --am-fs-xs:   0.75rem;
  --am-fs-sm:   0.875rem;
  --am-fs-base: 1rem;
  --am-fs-md:   1.1rem;
  --am-fs-lg:   clamp(1.4rem, 1.4rem + ((1vw - 0.2rem) * 0.833), 1.9rem);
  --am-fs-xl:   clamp(2rem,   2rem   + ((1vw - 0.2rem) * 1.083), 2.65rem);
  --am-fs-2xl:  clamp(2.5rem, 2.5rem + ((1vw - 0.2rem) * 1.5),   3.5rem);

  /* Spacing */
  --am-sp-xs: 1rem;
  --am-sp-sm: min(1.5rem, 2vw);
  --am-sp-md: min(2.5rem, 3vw);
  --am-sp-lg: min(4rem,   5vw);
  --am-sp-xl: min(6.5rem, 8vw);

  /* Radii */
  --am-radius-sm:  4px;
  --am-radius:     8px;
  --am-radius-lg:  12px;
  --am-radius-pill: 100px;

  /* Shadows */
  --am-shadow-sm: 0 2px 8px  rgba(0,0,0,.35);
  --am-shadow:    0 6px 24px rgba(0,0,0,.45);
  --am-shadow-lg: 0 12px 48px rgba(0,0,0,.55);

  /* Card surface — used by kanban cards and other floating elements */
  --am-card: var(--am-bg-card);
}

/* Accent (photography services pages) */
:root {
  --am-photo-gold:        #C9A96E;
  --am-photo-gold-dim:    rgba(201, 169, 110, 0.18);
  --am-photo-gold-border: rgba(201, 169, 110, 0.45);

  /* Brighter, more-yellow gold for outline accents (portfolio arch, etc.).
   * Sits next to --am-photo-gold but pushes saturation toward yellow so
   * thin 1px outlines read clearly on the dark cream backdrop. */
  --am-photo-gold-yellow:        #D9B354;
  --am-photo-gold-yellow-border: rgba(217, 179, 84, 0.7);
  --am-photo-gold-yellow-hover:  rgba(231, 198, 110, 0.95);

  /* Arch frame tokens — used by the portfolio arched cards on the public
   * landing page. Ported from the legacy andremoreira.pt site, where the
   * arch's signature was a 1px border + a second 1px outline offset
   * outwards, producing a thin double-line frame. */
  --am-arch-aspect-ratio:   1 / 1.5;
  --am-arch-radius:         9999px 9999px 0 0;
  --am-arch-outline-offset: 10px;
  --am-arch-border-width:   2px;
  --am-arch-outline-width:  1px;
  --am-arch-line:           var(--am-text);
  --am-arch-line-hover:     var(--am-base-2);
  --am-arch-glow:           0 0 50px -12px var(--am-text);
}

/* ── Portfolio arched cards ────────────────────────────────────
 *
 * Used on the public landing page (`index.php`) to render one card
 * per session type. The arch is a half-pill-topped frame with a
 * 1px inner border and a 1px outer outline offset by 10px — the
 * double-line aesthetic carried over from the legacy WordPress
 * theme. Hover lifts the card, intensifies both lines, and drops
 * a soft glow behind the frame.
 *
 * Tokens live above in `:root` so other tenants can re-skin the
 * arch without touching the component rules.
 */
.portfolio-type-card {
  background: none;
  border: 0;
  padding: 0;
  width: 100%;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  color: inherit;
  transition: transform .35s ease;
}
.portfolio-type-card:hover { transform: translateY(-6px); }
.portfolio-type-card:focus { outline: none; }

.portfolio-arch {
  position: relative;
  aspect-ratio: var(--am-arch-aspect-ratio);
  border-radius: var(--am-arch-radius);
  border: var(--am-arch-border-width) solid var(--am-arch-line);
  outline: var(--am-arch-outline-width) solid var(--am-arch-line);
  outline-offset: var(--am-arch-outline-offset);
  overflow: hidden;
  background: rgba(0, 0, 0, .25);
  box-shadow: 0 6px 20px -10px rgba(0, 0, 0, .6);
  transition:
    border-color .8s ease,
    outline-color .8s ease,
    box-shadow .8s ease;
}
.portfolio-arch-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--am-arch-radius);
}
.portfolio-arch-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s ease;
}

.portfolio-type-card:hover .portfolio-arch,
.portfolio-type-card:focus-visible .portfolio-arch {
  border-color: var(--am-arch-line-hover);
  outline-color: var(--am-arch-line-hover);
  box-shadow: var(--am-arch-glow);
}
.portfolio-type-card:hover .portfolio-arch-inner img {
  transform: scale(1.06);
}

.portfolio-type-name {
  margin-top: calc(var(--am-arch-outline-offset) + 1rem);
  font-family: var(--am-font-heading);
  font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  letter-spacing: .05em;
  color: var(--am-text);
}

/* Reserve the offset outline's footprint in the grid so neighbouring
   columns don't visually clip it on narrow viewports. */
.portfolio-types-area .row > [class*="col-"] {
  padding-inline: calc(var(--bs-gutter-x) * .5 + var(--am-arch-outline-offset));
}

/* ── Accordion (Bootstrap) ─────────────────────────────────────
 *
 * Bootstrap's defaults render a white button with #0c63e4 blue
 * accents when open — clashes with this cream-on-dark palette and
 * leaves the closed button as a bright white slab on the dark
 * body. Bootstrap 5.3 exposes accordion styling through the
 * `--bs-accordion-*` custom properties; overriding them on
 * `.accordion` re-themes every accordion on the platform without
 * touching `style.css`.
 */
.accordion {
  --bs-accordion-bg:                 var(--am-bg-card);
  --bs-accordion-color:              var(--am-text);
  --bs-accordion-border-color:       var(--am-border);
  --bs-accordion-border-radius:      var(--am-radius);
  --bs-accordion-inner-border-radius: var(--am-radius);

  --bs-accordion-btn-color:          var(--am-text);
  --bs-accordion-btn-bg:             var(--am-bg-card);
  --bs-accordion-btn-focus-border-color: rgba(203, 191, 176, 0.30);
  --bs-accordion-btn-focus-box-shadow:   0 0 0 0.2rem rgba(203, 191, 176, 0.12);

  /* Expanded state — warmer dark surface instead of Bootstrap blue */
  --bs-accordion-active-color:       var(--am-text);
  --bs-accordion-active-bg:          var(--am-bg-alt);

  /* Chevron — single brand-coloured SVG in both states (Bootstrap
     rotates it via `--bs-accordion-btn-icon-transform`). Hex is
     URL-encoded (`%23` = `#`); the colour matches `--am-text`. */
  --bs-accordion-btn-icon:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23CBBFB0'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23CBBFB0'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

/* Hover lift on the closed button so it reads as interactive */
.accordion-button.collapsed:hover {
  background-color: var(--am-bg-alt);
}

/* Dark-glass treatment for the three surface elements that use blur-background.
   Defined here so light-theme brands (e.g. mstudio) can override or ignore. */
.site-header,
.quote-section,
.site-footer {
  background: rgba(22, 28, 24, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}