/* Ivory Cake Studio site tokens and base rules. Colours, fonts and type sizes live in the Elementor kit (Site
   Settings); this file holds only what the kit cannot: shared measurements, the 340 headline weight, and resets. */
:root {
  --ivory: #FCF4EA;
  --ink: #241818;
  --ink-2: #5B4E48;
  --gold: #B4843C;
  --gold-soft: #C39C64;
  --teal: #0E6B6E;
  --line: rgba(36, 24, 24, .2);
  --line-light: rgba(252, 244, 234, .34);
  --g: clamp(16px, 4vw, 56px);
  --frame: 1400px;
  --side: max(var(--g), (100vw - var(--frame)) / 2);
  --gap: clamp(12px, 1.7vw, 24px);
  --iv-gap: var(--gap); /* the same gap under a name Elementor containers do not overwrite (they set their own --gap) */
  --pad: clamp(72px, 10vw, 152px);
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --inout: cubic-bezier(.76, 0, .24, 1);
  interpolate-size: allow-keywords;
}

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { background: var(--ivory); color: var(--ink); overflow-x: clip; -webkit-font-smoothing: antialiased; }

/* The kit's font-weight list stops at whole hundreds; the display and heading styles are set at 340. */
body[class*="elementor-kit-"] {
  --e-global-typography-primary-font-weight: 340;
  --e-global-typography-secondary-font-weight: 340;
  /* Body line height as a plain number, as the preview has it (1rem/1.55): the kit's 1.55em is handed down as a fixed
     24.8px, so text set smaller or larger inside (tabs, chips) kept 24.8px instead of 1.55 times its own size. */
  --e-global-typography-text-line-height: 1.55;
}

.elementor-heading-title { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Top-level sections: content never wider than the 1400px frame, side gutter --g (the kit gives nested boxes none).
   A section's own padding setting still wins. */
.e-con.e-parent { --container-default-padding-left: var(--g); --container-default-padding-right: var(--g); }

/* Buttons: ink fill slides up from the bottom on hover, the arrow moves 5px (kit holds colours, type and padding). */
.elementor-button { position: relative; overflow: hidden; isolation: isolate; transition: transform .2s var(--ease), color .3s var(--ease); }
.elementor-button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform .4s var(--ease); }
.elementor-button .elementor-button-icon { transition: transform .4s var(--ease); }
.elementor-button:active { transform: scale(.975); }
.elementor-button:active::before { transform: none; }
@media (hover: hover) {
  .elementor-button:hover::before, .elementor-button:focus-visible::before { transform: none; }
  .elementor-button:hover .elementor-button-icon { transform: translateX(5px); }
}

/* Masthead (container setting "Ivory: masthead"): the header wrapper sticks and slides away; mast.js toggles is-up. */
/* Every header sits above the page, so its dropdown panels cover the content (page widgets are z-index 2). */
.elementor-location-header { position: relative; z-index: 50; }
.elementor-location-header:has([data-mast="slide"]) { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; transition: transform .3s var(--ease), background-color .3s linear, box-shadow .3s linear; }
.iv-mast.is-up { transform: translateY(-100%); box-shadow: none; }
.iv-mast--static { transition: background-color .3s linear, box-shadow .3s linear; } /* local .mast fades its background on every page */
.iv-mast.is-scrolled:not(.is-up) { box-shadow: 0 1px 0 var(--line); }
.ivmenu-open .iv-mast--static { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; } /* the open menu still needs its header */
/* On phones (600px and under) the WordPress toolbar of a logged-in user scrolls away with the page, so the header sticks to
   the very top there; leaving room for the toolbar left a 46px strip of page showing above it. */
@media (max-width: 600px) { .elementor-location-header:has([data-mast="slide"]), .ivmenu-open .iv-mast--static { top: 0; } }
/* Header height before any script runs (local --mast-h: call line + logo row + category row). */
/* Elementor containers set their own --display (flex or grid), so inside them the font stack is read from here. */
:root { --iv-display: var(--display); --mast-h: 90px; }
@media (min-width: 900px) { :root { --mast-h: 98px; } }
@media (min-width: 1100px) { :root { --mast-h: 144px; } }
html { scroll-padding-top: calc(var(--mast-on, var(--mast-h)) + 16px); }

/* Header switch at 1100px (between Elementor's breakpoints): add these classes under Advanced > CSS Classes. */
@media (max-width: 1099px) { .iv-from-1100 { display: none !important; } .e-con.iv-push-narrow { --margin-inline-start: .25rem; --margin-inline-end: auto; margin-inline: .25rem auto; } }
@media (min-width: 1100px) { .iv-below-1100 { display: none !important; } .elementor-element.iv-push-wide { --margin-inline-start: auto; --margin-inline-end: auto; margin-inline: auto; } }

/* Header search (Pro Search Form, class iv-find): the site's own magnifier (icon "search") in place of the Font Awesome glyph. */
.iv-find .elementor-search-form__submit > :not(.elementor-screen-only) { display: none; }
.iv-find .elementor-search-form__submit::after { content: ""; display: block; margin: auto; width: var(--e-search-form-submit-icon-size, 18px); height: var(--e-search-form-submit-icon-size, 18px); background-color: currentColor; -webkit-mask: var(--iv-find-ico) center/contain no-repeat; mask: var(--iv-find-ico) center/contain no-repeat; }
.iv-find { --iv-find-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%20fill='none'%3E%3Cg%20transform='scale%2810.6667%29'%3E%3Ccircle%20cx='10.5'%20cy='10.5'%20r='6.5'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'/%3E%3Cpath%20d='M15.5%2015.5%2021%2021'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E"); }
@media (max-width: 359px) { .iv-hide-xs { display: none !important; } }
/* Icon and Button widgets: the link sits on a line of body text height, which added 7px under 44px circles and
   buttons. The icon wrapper holds only the link (which sets its own line-height); the button hangs from the top. */
.elementor-widget-icon .elementor-icon-wrapper { line-height: 0; }
.elementor-widget-button .elementor-button { vertical-align: top; }
.iv-tilt .elementor-icon i { transition: transform .45s var(--ease); }
@media (hover: hover) { .iv-tilt .elementor-icon:hover i { transform: rotate(-12deg) scale(1.08); } }

/* Header links: Pro Nav Menu with the class iv-navline. A drawn underline on hover, replaced by one sliding line once
   mast.js runs. */
.iv-navline nav.elementor-nav-menu--main { position: relative; }
.iv-navline .elementor-nav-menu--main .elementor-item { background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.iv-navline .elementor-nav-menu--main .elementor-item:is(:hover, :focus-visible, .elementor-item-active) { background-size: 100% 1px; }
.iv-navline.is-fx .elementor-nav-menu--main .elementor-item { background: none; }
.iv-navline__line { position: absolute; left: 0; bottom: 10px; width: 0; height: 1px; background: currentColor; pointer-events: none; opacity: 0; transition: transform .55s cubic-bezier(.16, 1, .3, 1), width .55s cubic-bezier(.16, 1, .3, 1), opacity .25s linear; }
@media (prefers-reduced-motion: reduce) { .iv-navline__line { transition: none; } }
/* Logo on small phones, as local: no butterfly under 420px, a smaller wordmark under 360px. */
@media (max-width: 419px) { .iv-brand-mark { display: none !important; } }
@media (max-width: 359px) { .iv-brand-word img { width: 95px !important; height: 24px !important; } }

/* ---------- Footer (Theme Builder). Containers and native widgets carry layout, type and colour; these are the
   parts Elementor has no control for. Classes: iv-foot (footer), iv-foot-in (columns that come up), iv-flinks
   (Icon List links), iv-foot-name (the big name), iv-foot-base (last row), iv-up (back to top). ---------- */
.iv-foot { container-type: inline-size; }
.iv-foot :focus-visible { outline-color: var(--ivory); }
.iv-foot.is-armed .iv-foot-in { opacity: 0; transform: translateY(16px); }
.iv-foot.is-armed.is-in .iv-foot-in { opacity: 1; transform: none; transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--iv-in, 0) * .06s); }
.iv-flinks.elementor-widget .elementor-icon-list-item > a { display: inline-flex; width: auto; align-items: center; min-height: 44px; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 0 1px no-repeat; }
.iv-flinks.elementor-widget .elementor-icon-list-item > a { color: var(--e-global-color-ivivory, #fcf4ea); } /* the link text sits in a span Elementor colours; the link colour only draws the underline, in the same globals */
.iv-flinks.elementor-widget .elementor-icon-list-item > a:is(:hover, :focus-visible) { background-size: 100% 1px; color: var(--e-global-color-ivgoldsoft, #c39c64); }
.iv-flinks.elementor-widget .elementor-icon-list-icon { flex: none; }
.iv-flinks.elementor-widget .elementor-icon-list-icon .ivp { width: 1em; height: 1em; }
.iv-flinks.elementor-widget .elementor-icon-list-icon + .elementor-icon-list-text { padding-inline-start: 0; }
@media (min-width: 900px) { .iv-flinks.elementor-widget .elementor-icon-list-item > a { min-height: 36px; background-position-y: calc(100% - 5px); white-space: nowrap; } }
@media (prefers-reduced-motion: no-preference) { .iv-flinks.elementor-widget .elementor-icon-list-item > a { transition: background-size .45s var(--ease), color .25s linear; } }
.iv-foot address { font-style: normal; }
.iv-foot-name .elementor-heading-title { display: flex; padding-bottom: .025em; overflow: hidden; user-select: none; }
.iv-foot-name .elementor-heading-title span { display: block; padding-top: .04em; background: linear-gradient(180deg, var(--gold-soft) 0%, rgba(195, 156, 100, .55) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; will-change: transform; }
.iv-foot-name .elementor-heading-title span:first-child { margin-left: -.0294em; } /* the I's serif sits on the frame line */
.iv-foot-name .elementor-heading-title span:last-child { margin-left: -.025em; } /* Fraunces' R-Y kern, put back by hand */
@media (max-width: 599px) { .iv-foot-base > .elementor-widget:nth-child(2) { display: none; } }
.iv-up .elementor-button { display: inline-flex; align-items: center; min-height: 44px; vertical-align: top; }
.iv-up .elementor-button::before { content: none; }
.iv-up .elementor-button-content-wrapper { align-items: center; gap: .6rem; }
.iv-up .elementor-button-content-wrapper::after { content: "\2191"; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(252, 244, 234, .3); border-radius: 50%; transition: background-color .25s linear, color .25s linear, border-color .25s linear, transform .45s var(--ease); }
.iv-up .elementor-button:is(:hover, :focus-visible) .elementor-button-content-wrapper::after { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--ink); transform: translateY(-3px); }

/* Skip to content: hidden until a keyboard user tabs to it, then a dark tab at the top left (local .skip). */
.skip-link.screen-reader-text:focus { position: absolute; left: var(--side, 16px); top: 8px; z-index: 100000; width: auto; height: auto; clip: auto; clip-path: none; margin: 0; padding: 12px 16px; background: var(--ink); color: var(--ivory); font: 400 1rem/1.55 var(--body); text-decoration: none; }
#main:focus { outline: none; }