/*
Theme Name: MyShell Studio
Template: hello-elementor
Version: 0.2.0
Description: Editable Elementor translation of the MyShell Sketchbook design, protected development preview.
*/

@font-face { font-family: 'Kalam'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/Kalam-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Kalam'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/Kalam-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/AtkinsonHyperlegible-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/AtkinsonHyperlegible-Bold.ttf') format('truetype'); }

/* Native Elementor widgets add wrappers around the reference's semantic content. */
.myshell-design :where(.elementor-widget-heading) .elementor-heading-title { font-family: var(--f-head); font-weight: 700; line-height: 1.1; }
.myshell-design :where(h1).elementor-heading-title { color: var(--purple); }
.myshell-design :where(h2).elementor-heading-title { color: var(--orange-dk); }
.myshell-design :where(h3).elementor-heading-title { color: var(--graphite); }
.myshell-design :is(.d-ses, .sc-club, .hc-period, .d-product, .hc-aside, .bs-what, .bk-pay) h3.elementor-heading-title { font-family: var(--f-body); }
.myshell-design .d-product h2.elementor-heading-title { font-family: var(--f-body); color: var(--graphite); }
.myshell-design .d-note,
.myshell-design .d-note .elementor-widget-text-editor { font-family: var(--f-head); font-size: 23px; line-height: 1.2; color: var(--purple); }
.myshell-design .brand-name .elementor-widget-text-editor { font: inherit; }
.myshell-design .design-summary .elementor-heading-title { padding: 14px 24px; font: 700 19px/1.4 var(--f-body); }
/* Direct-child source paragraphs become editable widgets in Elementor. */
.myshell-design .d-head > .elementor-widget-text-editor { max-width: 42ch; }
.myshell-design .mu-group > .elementor-widget-text-editor { margin-bottom: var(--s3); }
.myshell-design .inc-talk > div > .elementor-widget-text-editor { margin-bottom: var(--s2); }
.myshell-design .elementor-widget-container > dl { width: 100%; }
.myshell-design .elementor-widget-container > dl > div { min-width: 0; }
.myshell-design .elementor-widget-html > .elementor-widget-container,
.myshell-design .elementor-widget-image > .elementor-widget-container { width: 100%; height: 100%; }
.myshell-design .elementor-widget-html svg { display: block; width: 100%; height: 100%; }
.myshell-design .elementor-widget-image img { display: block; width: 100%; object-fit: cover; }
.myshell-design .ci-fig .wp-caption { margin: 0; width: 100%; height: 100%; }
.myshell-design .ci-fig img { height: 100%; }
.myshell-design .ci-fig .widget-image-caption { position: absolute; left: 8px; bottom: 8px; z-index: 2; margin: 0; padding: 4px 8px; background: var(--white); color: var(--graphite); border: 1px solid var(--graphite); border-radius: 2px; font: 700 12px/1.2 var(--f-body); }
.myshell-design .design-link { width: auto; max-width: 100%; }
.myshell-design :where(.design-link) .elementor-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; color: inherit; font: inherit; text-align: inherit; border: 0; border-radius: 0; }
.myshell-design .d-btn.design-link,
.myshell-design .d-textlink.design-link { display: block; padding: 0; border: 0; background: none; }
.myshell-design .d-btn.design-link .elementor-button { min-height: 48px; padding: 0 22px; border: 2px solid var(--blue); border-radius: 4px 7px 5px 6px; font: 700 17px/1.3 var(--f-body); text-decoration: none; }
.myshell-design .d-btn-primary.design-link .elementor-button { color: var(--white); background: var(--blue); }
.myshell-design .d-btn-primary.design-link .elementor-button:hover { background: var(--blue-dk); }
.myshell-design .d-btn-pink.design-link .elementor-button { color: var(--white); background: var(--pink-dk); border-color: var(--pink-dk); }
.myshell-design .d-btn-pink.design-link .elementor-button:hover { background: #8F0F4C; }
.myshell-design .d-btn-secondary.design-link .elementor-button { color: var(--blue); background: var(--white); }
.myshell-design .d-btn-lg.design-link .elementor-button { min-height: 56px; padding-inline: 28px; font-size: 18px; }
.myshell-design .d-textlink.design-link .elementor-button { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.myshell-design .d-textlink.design-link .elementor-button:hover { text-decoration-style: wavy; text-decoration-color: var(--green); }
.myshell-design .shop-tabs .design-link .elementor-button { min-height: 48px; padding: 0 var(--s2); margin-bottom: -2px; border: 2px solid transparent; border-radius: 6px 6px 0 0; font-weight: 700; text-decoration: none; }
.myshell-design .shop-tabs .design-link .elementor-button:hover { background: var(--white); }
.myshell-design .shop-tabs .design-link .elementor-button[aria-current="page"] { background: var(--white); border-color: var(--graphite); border-bottom-color: var(--white); color: var(--blue); }
/* School clubs finder: the plugin's script adds the search and filters (.sc-filters) and the live count (.sc-count). */
.myshell-design .sc-finder { display: grid; gap: var(--s3); align-content: start; }
.myshell-design .sc-finder .sc-legend { margin-bottom: 0; }
.myshell-design .sc-filters { display: grid; gap: var(--s3); padding: var(--s3); background: var(--white); box-shadow: var(--paper-shadow); }
/* Content-sized pills keep each group on one line, so the panel stays short above the list on a phone.
   The radio stays in place for keyboards and screen readers; the pill shows its state and focus. */
.myshell-design .sc-filters .f-options { display: flex; flex-wrap: wrap; gap: var(--s1); }
.myshell-design .sc-filters .f-option { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 44px; }
.myshell-design .sc-filters .f-option input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.myshell-design .sc-filters .f-option:has(input:checked) { border-color: var(--blue); background: #E4E8F5; }
.myshell-design .sc-filters .f-option:has(input:checked)::before { content: "✓" / ""; font-weight: 700; line-height: 1; color: var(--blue); }
.myshell-design .sc-filters .f-option:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.myshell-design .sc-filters .d-btn { justify-self: start; }
.myshell-design .sc-count { margin: 0; font-weight: 700; }
@media (max-width: 599px) {
  .myshell-design .sc-filters { padding: var(--s2); }
}
.myshell-design .brand { flex-direction: row; }
.myshell-design .brand-mark { width: 56px; height: 52px; }
.myshell-design .brand-mark img { width: auto; height: 52px; }
.myshell-design .brand-name { width: auto; font: 700 28px/1.05 var(--f-head); }
.myshell-design .brand-name > .elementor-widget { width: auto; }
.myshell-design .design-native-nav { margin-left: auto; }
.myshell-design .design-menu .elementor-item { font-family: var(--f-body); font-size: 17px; font-weight: 700; min-height: 44px; padding: 0 12px; color: var(--graphite); }
.myshell-design .design-menu .elementor-item:hover { color: var(--blue); }
.myshell-design .design-menu .elementor-menu-toggle { min-width: 44px; min-height: 44px; padding: 10px; color: var(--graphite); background: var(--white); border: 2px solid var(--graphite); border-radius: 4px; }
.myshell-design .design-menu .elementor-nav-menu--dropdown { background: var(--white); border: 2px dashed var(--pencil); z-index: 20; }
.myshell-design .design-menu .elementor-nav-menu--dropdown .elementor-item { padding: 12px 18px; }
/* Elementor paints the current page's item dark grey; our dark text on it was close to unreadable. Match the desktop menu: blue text on white. */
.myshell-design .design-menu .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
.myshell-design .design-menu .elementor-nav-menu--dropdown .elementor-item.elementor-item-active:hover,
.myshell-design .design-menu .elementor-nav-menu--dropdown .elementor-item.highlighted { background: var(--white); color: var(--blue); text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.myshell-design .design-menu .elementor-nav-menu--dropdown .elementor-item:hover,
.myshell-design .design-menu .elementor-nav-menu--dropdown .elementor-item:focus { background: var(--white); color: var(--blue); }
.myshell-design .design-tag-ul,
.myshell-design .design-tag-ol { list-style: none; padding-left: 0; }
.myshell-design .design-tag-li { min-width: 0; }
.myshell-design .pol-toc .design-tag-li { display: list-item; }
/* Public notices reuse the policy layout without the mock-up's banner row. */
.myshell-design .public-notice { grid-template-areas: "head head" "toc body"; }
.myshell-design .public-notice :is(.pol-head, .pol-body, .pol-toc, .elementor-widget) { min-width: 0; }
.myshell-design .public-notice :is(p, a, dt, dd) { overflow-wrap: anywhere; }
.myshell-design .public-notice .notice-list { display: grid; gap: var(--s2); }
.myshell-design .public-notice .notice-cookies { margin: 0; }
.myshell-design .public-notice .notice-cookies > div { margin-bottom: var(--s4); }
.myshell-design .public-notice .notice-cookies dt { font-weight: 700; }
.myshell-design .public-notice .notice-cookies dd { margin: var(--s1) 0 0; }
.myshell-design .d-act-grid > .d-act,
.myshell-design .d-shop-grid > .d-product { width: 100%; }
/* Share photo, heading, body and action tracks even when a title takes two lines.
   The reference photo rotations remain on the frame; text has no card-level drop. */
.myshell-design .d-act-grid > .d-act { margin-top: 0; grid-row: span 4; grid-template-rows: subgrid; }
/* Use the home hero's spacing without changing the action order in the document. */
.myshell-design .d-ses-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
/* Only the decorative divider clips its off-edge splats. */
.myshell-design .swirl-div { overflow-x: clip; }
.myshell-design .contact-facts dd,
.myshell-design .contact-facts a,
.myshell-design .d-footer-contact-details a { overflow-wrap: anywhere; }
.myshell-design .d-footer-contact-details { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s3); }
.myshell-design .d-footer-contact-details a { min-width: 0; max-width: 100%; }
.myshell-design .design-field { min-height: 48px; padding: 8px 12px; border: 2px solid var(--graphite); border-radius: 4px 6px 5px 4px; background: var(--white); color: var(--muted); font-size: 16px; }
.myshell-design .design-field-textarea { min-height: 120px; }
.myshell-design .elementor-widget.design-field-select { position: relative; padding-right: 36px; }
.myshell-design .design-field-select::after { content: "▾"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.myshell-design .design-choice { display: grid; place-items: center; width: 24px; min-width: 24px; height: 24px; box-sizing: border-box; margin: 2px 0 0; border: 2px solid var(--graphite); border-radius: 4px; background: var(--white); color: var(--blue); padding: 0; font-size: 14px; font-weight: 700; }
.myshell-design .design-choice-radio { border-radius: 50%; }
.myshell-design .design-choice.is-on { border-color: var(--blue); }
.myshell-design .design-choice > .elementor-widget-container,
.myshell-design .elementor-widget:is(.design-tag-label, .design-tag-legend) > .elementor-widget-container { display: contents; }
.myshell-design .design-choice p { line-height: 1; text-align: center; }
.myshell-design .f-option .design-tag-label,
.myshell-design .f-check .design-tag-label { cursor: default; }
.myshell-design .f-option .design-tag-label > p,
.myshell-design .f-option .design-tag-label > .elementor-widget-container > p { display: grid; gap: 2px; }
.myshell-design .design-inert-control { width: auto; cursor: default; opacity: .65; }
.myshell-design .design-inert-control.d-btn { display: block; padding: 10px 20px; }
.myshell-design .design-form-preview { display: grid; gap: var(--s3); }
.myshell-design .bk-main .design-form-preview { background: var(--white); padding: var(--s5); box-shadow: var(--paper-shadow); }
/* Only schools after a shown school are spaced, so when the club finder hides the first schools the first one
   still shown lines up with the finder panel. */
.myshell-design .design-school-section:not([hidden]) ~ .design-school-section,
.myshell-design .design-venue-section + .design-venue-section { margin-top: var(--s8); }
.myshell-design .design-school-section,
.myshell-design .design-venue-section { scroll-margin-top: 24px; }
/* The widget reset zeroes the reference heading margin; this restores it, the same gap as "Find a club" above the finder.
   A margin, not a grid gap, so the clubs list's bottom margin still merges with the next school's top margin. */
.myshell-design .design-school-section > .sc-school-title { margin-bottom: var(--s3); }
/* Launch-page sections take their rhythm from grid gaps, because the widget reset zeroes margins. */
.myshell-design .d-stack { display: grid; gap: var(--s2); align-content: start; }
/* On the paragraph: Elementor's doubled-class rule keeps every widget at max-width 100%. */
.myshell-design .d-stack > .elementor-widget-text-editor p { max-width: 70ch; }
.myshell-design .d-stack h2.elementor-heading-title { margin-bottom: 0; }
.myshell-design .hc-main { display: grid; gap: var(--s6); align-content: start; }
.myshell-design .hc-main > .design-venue-section + .design-venue-section { margin-top: 0; }
.myshell-design .mu-main { display: grid; gap: var(--s10); padding-bottom: var(--s12); }
.myshell-design .cm-body { display: grid; gap: var(--s6); padding-bottom: var(--s12); }
.myshell-design .cm-how { list-style: decimal; padding-left: var(--s3); display: grid; gap: var(--s1); }
.myshell-design .cm-how > .design-tag-li { display: list-item; }
/* The reference grid is sized for five offers; About has two people. */
.myshell-design .ab-people :is(ul, div:where(.design-tag-ul)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.myshell-design .ab-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.myshell-design .ab-reviews > .design-tag-li { display: grid; gap: var(--s2); }
/* "Get in touch" follows the reviews on the same paper, so one section gap is enough rather than both sections' padding. */
.myshell-design .d-section + .ct-contact { padding-top: 0; }
/* A single pupil quote (school clubs and music) stays a readable card rather than spanning the page. */
.myshell-design .d-quote { display: grid; gap: var(--s2); max-width: 40rem; }
/* Live club dates and the Woosehill form line up with the club text instead of centring. */
.myshell-design .sd-after { display: grid; gap: var(--s6); padding-bottom: var(--s12); }
.myshell-design .sd-after > .msb,
.myshell-design .sd-after .myshell-club-form { margin: 0; }
/* The plugin narrows its box to inset it on the booking page; here the column already has its padding, so the dates box spans it. */
.myshell-design .sd-after > .msb { width: 100%; }
.myshell-design .sd-form { display: grid; gap: var(--s2); }
.myshell-design .pg-accent.elementor-widget-html svg { width: auto; height: 200px; max-width: 100%; }
/* Links inside running text look like links; buttons and styled links keep their own classes. */
.myshell-design :is(.elementor-widget-text-editor, .myshell-club-form) a:where(:not([class])) { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.myshell-design .sd-two .design-tag-ul > .design-tag-li,
.myshell-design .d-ticks > .design-tag-li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
.myshell-design .d-practical h2.elementor-heading-title { color: var(--graphite); }
.myshell-design .pol-banner .elementor-widget-container,
.myshell-design .draft-label .elementor-widget-container { color: var(--purple); }
.myshell-design .st .elementor-widget-container { display: contents; }
/* The source dot is a pseudo-element beside a paragraph now inside a widget. */
.myshell-design .d-ses-type.elementor-widget-text-editor { display: inline-flex; align-items: baseline; }
.myshell-design .d-ses-type.elementor-widget-text-editor > .elementor-widget-container { display: contents; }
.myshell-design .d-ses-type.elementor-widget-text-editor::before { flex-shrink: 0; }
.myshell-design .elementor a:focus-visible,
.myshell-design .elementor button:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.myshell-design main { min-width: 0; }
.myshell-design main:focus { outline: none; }
.myshell-design .d-footer .brand-mark { height: 60px; }
/* Native rich text inserts a paragraph/span between each layout row and its items. */
.myshell-design .elementor-widget:is(.d-footer-links, .d-product-meta, .pd-price-row, .st) > .elementor-widget-container { display: contents; gap: inherit; flex-wrap: inherit; align-items: inherit; justify-content: inherit; }
.myshell-design .elementor-widget:is(.d-footer-links, .d-product-meta, .pd-price-row, .st) > :is(p, span),
.myshell-design .elementor-widget:is(.d-footer-links, .d-product-meta, .pd-price-row, .st) > .elementor-widget-container > :is(p, span) { display: flex; gap: inherit; flex-wrap: inherit; align-items: inherit; justify-content: inherit; }
@media (min-width: 1025px) and (max-width: 1199px) {
  /* Narrow desktops: keep all five menu items on one line beside the logo and Book a club
     (measured in Chrome from 1025px; at full size the menu wraps until about 1165px). */
  .myshell-design .d-header-row { gap: var(--s2); }
  .myshell-design .brand-name { font-size: 24px; }
  .myshell-design .design-menu .elementor-item { font-size: 16px; padding: 0 6px; }
}
@media (max-width: 1024px) {
  /* Logo left; menu button and Book a club together on the right. Book wraps to the right of a
     second row only when one row is genuinely too narrow. DOM and focus order stay unchanged. */
  .myshell-design .d-header-row { gap: var(--s2); flex-wrap: wrap; justify-content: flex-end; }
  .myshell-design .d-header-row > .d-logo { margin-right: auto; }
  /* The open menu floats under the header's right edge rather than reserving its width in the closed
     header. The row is the positioning box because the button may sit left of Book a club. */
  .myshell-design .d-header-row :is(.design-native-nav, .design-menu, .design-menu > .elementor-widget-container) { position: static; }
  .myshell-design .design-menu .elementor-nav-menu--dropdown.elementor-nav-menu__container { position: absolute; top: 100%; width: min(320px, calc(100vw - 32px)); left: auto; right: var(--s3); }
  .myshell-design .d-actions { margin-left: 0; }
  .myshell-design .d-head { align-items: start; }
}
@media (max-width: 1023px) {
  .myshell-design .public-notice { grid-template-areas: "head" "toc" "body"; }
  .myshell-design .ab-reviews { grid-template-columns: 1fr; }
}
@media (max-width: 699px) {
  .myshell-design .ab-people :is(ul, div:where(.design-tag-ul)) { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .myshell-design .d-header-row { gap: var(--s1); padding-block: var(--s1); }
  .myshell-design .design-menu .elementor-nav-menu--dropdown.elementor-nav-menu__container { right: var(--s2); }
  .myshell-design .brand-mark,
  .myshell-design .brand-mark img { width: auto; height: 40px; }
  .myshell-design .brand-name { font-size: 21px; flex-direction: column; }
  /* Elementor keeps the original word spans inside a rich-text widget. */
  .myshell-design .brand-name > span,
  .myshell-design .brand-name > .elementor-widget-container > span { display: inline-flex; flex-direction: column; row-gap: 2px; }
  .myshell-design .d-find.design-link .elementor-button { min-height: 44px; padding-inline: 12px; font-size: 15px; }
  .myshell-design .d-hero h1.elementor-heading-title { font-size: clamp(44px, 11vw, 64px); }
  .myshell-design .design-form-preview { gap: var(--s2); }
  .myshell-design .bk-main .design-form-preview { padding: var(--s3) var(--s2); }
}
/* The banner's Privacy and Cookie notice links are links, not plain text (COM-391). */
.cookieadmin_law_container .cookieadmin_consent_inside > a { display: inline-block; margin: 10px 14px 0 0; color: #1863dc; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 480px) {
  /* CookieAdmin stacks its three buttons full width here, which makes the banner about half a phone screen tall and covers the booking field being typed in (COM-390). Keep all three buttons in one row. */
  .cookieadmin_law_container .cookieadmin_consent_inside { padding: 12px; }
  .cookieadmin_law_container #cookieadmin_notice_title { margin-bottom: 4px; }
  .cookieadmin_law_container #cookieadmin_notice { font-size: 13px; line-height: 18px; }
  .cookieadmin_law_container .cookieadmin_consent_btns { flex-wrap: nowrap; gap: 6px; margin-top: 8px; }
  .cookieadmin_law_container .cookieadmin_consent_btns button.cookieadmin_btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding-inline: 4px; font-size: 14px; }
  /* While the banner is showing, bring a focused booking field up above it (the plugin's own margin is 40vh, which is too little at 320px wide). */
  body:has(.cookieadmin_law_container[style*="display: block"]) .msb :is(input, select, textarea) { scroll-margin-bottom: 60vh !important; }
}
@media (max-width: 379px) {
  /* The reference pads its own button here; in Elementor that lands on the wrapper and only widens Book a club. */
  .myshell-design .d-find.design-link { padding: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .myshell-design *, .myshell-design *::before, .myshell-design *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}