/*
Theme Name: Syd Patient
Description: Accessible, responsive patient information for Syd Anaesthesia.
Version: 1.1.0
*/
:root {
    --ink:#183e40;
    --muted:#526665;
    --teal:#17665d;
    --line:#dbe4df;
    --paper:#fcfcf8;
    --sage:#eaf0e8;
    --peach:#f3e5d7;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:32px;
}

body {
    margin:0;
    color:var(--ink);
    background:var(--paper);
    font:17px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

a {
    color:var(--teal);
    text-underline-offset:4px;
}

a:hover {
    color:#113e38;
}

button,input {
    font:inherit;
}

a,button,summary {
    touch-action:manipulation;
}

a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible {
    outline:3px solid #ad571c;
    outline-offset:5px;
}

h1,h2,h3,p {
    margin-top:0;
}

h1,h2 {
    font-family:Georgia,"Times New Roman",serif;
    font-weight:400;
    letter-spacing:-.045em;
    line-height:1.12;
}

h1 {
    font-size:clamp(40px,5.2vw,70px);
}

h2 {
    font-size:clamp(30px,3vw,42px);
}

h3 {
    font-size:21px;
    line-height:1.35;
}

p {
    margin-bottom:1.3em;
}

.wrap {
    width:min(1160px,calc(100% - 80px));
    margin:auto;
}

.skip {
    position:absolute;
    left:20px;
    top:-100px;
    z-index:99;
    background:white;
    padding:12px;
}

.skip:focus {
    top:12px;
}

.topline {
    background:var(--sage);
    font-size:12px;
    letter-spacing:.09em;
    padding:9px 0;
    text-transform:uppercase;
}

.topline .wrap {
    display:flex;
    justify-content:space-between;
    gap:20px;
}

.site-header {
    border-bottom:1px solid var(--line);
    background:var(--paper);
}

.header-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-height:102px;
}

.brand {
    display:flex;
    gap:13px;
    align-items:center;
    text-decoration:none;
    color:var(--ink);
    line-height:1.2;
}

.brand-mark {
    width:42px;
    height:48px;
    border:1px solid #7a9990;
    border-radius:24px 24px 9px 9px;
    display:grid;
    place-items:center;
    font-family:Georgia,serif;
    font-size:26px;
}

.brand strong {
    display:block;
    font-size:22px;
    letter-spacing:-.04em;
    font-weight:600;
}

.brand small {
    display:block;
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-top:8px;
}

.main-nav {
    display:flex;
    gap:27px;
    align-items:center;
}

.main-nav a {
    font-size:14px;
    text-decoration:none;
    font-weight:600;
    padding:10px 0;
}

.main-nav a[aria-current] {
    border-bottom:2px solid var(--teal);
}

.main-nav .contact-link {
    border:1px solid #bdcdc5;
    border-radius:7px;
    padding:10px 18px;
}

.menu-toggle {
    display:none;
}

.eyebrow {
    font-size:12px;
    font-weight:650;
    letter-spacing:.14em;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:22px;
}

.eyebrow:before {
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:#6c9181;
}

.hero {
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:70px;
    align-items:center;
    padding:66px 0 58px;
}

.hero h1 {
    max-width:640px;
    margin-bottom:25px;
}

.hero h1 em {
    font-weight:400;
    color:var(--teal);
}

.hero-copy>p {
    max-width:510px;
    color:var(--muted);
    font-size:18px;
    line-height:1.8;
}

.actions {
    display:flex;
    align-items:center;
    gap:25px;
    flex-wrap:wrap;
    margin-top:30px;
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    background:var(--teal);
    color:white;
    text-decoration:none;
    border-radius:6px;
    padding:14px 21px;
    font-size:15px;
    font-weight:600;
    border:0;
    cursor:pointer;
}

.button:hover {
    background:#104b44;
    color:white;
}

.text-link {
    font-size:14px;
    font-weight:600;
}

.hero-art {
    position:relative;
    min-height:410px;
    border-radius:190px 190px 12px 12px;
    background:#e8eee6;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    padding:38px;
}

.art-sun {
    position:absolute;
    top:47px;
    right:60px;
    width:95px;
    height:95px;
    background:#e7c9a8;
    border-radius:50%;
}

.art-ring {
    position:absolute;
    width:340px;
    height:340px;
    border:1px solid #bdcdc1;
    border-radius:50%;
    top:118px;
    left:-130px;
}

.art-ring.two {
    width:290px;
    height:290px;
    top:144px;
    left:-105px;
}

.art-stem {
    position:absolute;
    width:100px;
    height:215px;
    border-left:2px solid #718e78;
    transform:rotate(23deg);
    top:65px;
    left:50%;
}

.leaf {
    position:absolute;
    width:53px;
    height:29px;
    border-radius:0 90% 0 90%;
    background:#8ba28a;
    left:-51px;
    top:25px;
    transform:rotate(8deg);
}

.leaf:nth-child(2) {
    left:0;
    top:64px;
    transform:scaleX(-1);
    background:#adc0a7;
}

.leaf:nth-child(3) {
    top:110px;
}

.art-caption {
    position:relative;
    border:1px solid #fff;
    background:#fdfdf5e8;
    border-radius:9px;
    padding:23px 27px;
    width:100%;
    text-align:left;
}

.art-caption span {
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--muted);
}

.art-caption p {
    font:27px/1.3 Georgia,serif;
    margin:9px 0 0;
    letter-spacing:-.025em;
}

.doctor-strip {
    display:flex;
    align-items:center;
    gap:14px;
    padding:20px 0 27px;
    border-bottom:1px solid var(--line);
    font-size:13px;
    color:var(--muted);
}

.doctor-strip strong {
    color:var(--ink);
    font-weight:600;
}

.doctor-seal {
    border:1px solid #cbd8cf;
    border-radius:50%;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    color:var(--teal);
}

.section {
    padding:57px 0;
}

.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:27px;
}

.section-heading h2 {
    margin:0;
}

.section-heading p {
    margin:0;
    color:var(--muted);
    font-size:14px;
}

.journey-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.journey-card {
    border:1px solid var(--line);
    border-radius:10px;
    padding:28px;
    display:flex;
    flex-direction:column;
    text-decoration:none;
    color:var(--ink);
    background:white;
    transition:transform .2s,box-shadow .2s;
}

.journey-card:hover {
    transform:translateY(-4px);
    box-shadow:0 8px 25px #183e400c;
}

.card-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:30px;
}

.card-number {
    font:15px Georgia,serif;
    color:#70847a;
}

.card-icon {
    width:42px;
    height:42px;
    background:var(--sage);
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:21px;
}

.journey-card:nth-child(2) .card-icon {
    background:var(--peach);
}

.journey-card h3 {
    font:27px/1.2 Georgia,serif;
    letter-spacing:-.03em;
    margin-bottom:13px;
}

.journey-card p {
    font-size:15px;
    color:var(--muted);
    line-height:1.7;
    flex:1;
}

.card-action {
    font-weight:600;
    font-size:13px;
    display:flex;
    justify-content:space-between;
    border-top:1px solid var(--line);
    padding-top:17px;
}

.medication-band {
    background:var(--sage);
    border-radius:10px;
    padding:30px 34px;
    display:flex;
    gap:35px;
    align-items:center;
    justify-content:space-between;
    margin-top:23px;
}

.medication-band h3 {
    margin:0 0 7px;
    font-size:19px;
}

.medication-band p {
    margin:0;
    font-size:14px;
    color:var(--muted);
    max-width:650px;
}

.medication-band a {
    white-space:nowrap;
}

.extras {
    background:#f3f3ec;
    border-block:1px solid var(--line);
}

.extra-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
}

.resource-list {
    border-top:1px solid #cdd6cb;
}

.resource-list a {
    display:flex;
    justify-content:space-between;
    gap:15px;
    text-decoration:none;
    padding:17px 0;
    border-bottom:1px solid #cdd6cb;
    font-size:16px;
}

.help-copy p {
    color:var(--muted);
    font-size:16px;
}

.site-footer {
    padding:42px 0 24px;
    font-size:13px;
}

.footer-grid {
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr;
    gap:40px;
}

.site-footer h3 {
    font-size:14px;
}

.site-footer a {
    display:inline-block;
    margin-bottom:8px;
}

.footer-note {
    border-top:1px solid var(--line);
    padding-top:20px;
    margin-top:30px;
    font-size:12px;
    color:var(--muted);
}

.breadcrumb {
    padding:24px 0;
    font-size:13px;
    color:var(--muted);
}

.breadcrumb a {
    text-decoration:none;
}

.page-title {
    background:var(--sage);
    padding:37px 0 42px;
}

.page-title h1 {
    font-size:clamp(36px,4.2vw,54px);
    margin:0;
    max-width:900px;
}

.page-title .eyebrow {
    margin-bottom:15px;
}

.reading-layout {
    display:grid;
    grid-template-columns:235px minmax(0,1fr);
    gap:65px;
    padding-top:45px;
    padding-bottom:65px;
}

.guide-nav {
    font-size:14px;
    align-self:start;
    position:sticky;
    top:28px;
}

.guide-nav h2 {
    font:600 11px/1.5 -apple-system,BlinkMacSystemFont,sans-serif;
    text-transform:uppercase;
    letter-spacing:.12em;
    margin-bottom:15px;
    color:var(--muted);
}

.guide-nav a {
    display:block;
    text-decoration:none;
    padding:10px 13px;
    border-radius:5px;
    margin-bottom:3px;
}

.guide-nav a[aria-current] {
    background:var(--sage);
    font-weight:650;
    border-left:3px solid var(--teal);
}

.search-form {
    display:flex;
    margin-top:22px;
    gap:6px;
}

.search-form input {
    width:100%;
    min-width:0;
    background:white;
    border:1px solid #a6bcb0;
    border-radius:5px;
    padding:10px;
    font-size:14px;
}

.search-form button {
    background:var(--teal);
    color:white;
    border:0;
    border-radius:5px;
    padding:8px 12px;
    cursor:pointer;
}

.search-label {
    display:block;
    font-size:12px;
    margin-top:25px;
}

.search-label+.search-form {
    margin-top:7px;
}

.article {
    min-width:0;
    max-width:780px;
    color:#344d4c;
}

.article h2 {
    font-size:31px;
    line-height:1.25;
    margin:38px 0 18px;
    color:var(--ink);
}

.article h3 {
    margin-top:30px;
    color:var(--ink);
}

.article p,.article li {
    font-size:17px;
    line-height:1.85;
}

.article ul,.article ol {
    padding-left:24px;
}

.article li {
    margin-bottom:12px;
}

.article>p:first-child {
    font-size:19px;
    color:var(--muted);
}

.article :where(.wp-block-group)>* {
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
}

.article .wp-block-group {
    padding-left:0;
    padding-right:0;
}

.article .toggle-panel {
    display:block!important;
}

.article .toggle-panel[hidden] {
    display:none!important;
}

.article .kids-zone {
    background:#f1f2e8!important;
    border:1px solid var(--line);
    padding:25px!important;
}

.article .wp-block-button__link {
    background:var(--sage)!important;
    color:var(--ink)!important;
    border-radius:6px!important;
    font-size:16px;
    padding:12px 27px;
    border:1px solid #c2d1c6;
    text-decoration:none;
    display:inline-block;
}

.article .wp-block-button__link[aria-selected=true] {
    background:var(--teal)!important;
    color:white!important;
}

.article .wp-block-buttons {
    display:flex;
    gap:10px;
    margin:24px 0 30px;
}

.article details {
    border:1px solid var(--line);
    background:white;
    border-radius:8px;
    padding:0 23px;
    margin:12px 0;
}

.article summary {
    padding:20px 0;
    cursor:pointer;
    color:var(--ink);
    font-weight:600;
    font-size:18px;
}

.article details[open] {
    padding-bottom:15px;
}

.article iframe,.article video {
    max-width:100%;
}

.article iframe {
    width:100%;
    min-height:300px;
}

.article .has-small-font-size {
    font-size:14px;
}

.article-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-bottom:25px;
    padding-bottom:17px;
    border-bottom:1px solid var(--line);
    font-size:12px;
    color:var(--muted);
}

.print-button {
    border:1px solid #c5d2c9;
    border-radius:5px;
    background:transparent;
    padding:8px 12px;
    color:var(--teal);
    cursor:pointer;
    font-size:13px;
}

.toc {
    border:1px solid var(--line);
    background:white;
    border-radius:8px;
    padding:20px 24px;
    margin-bottom:30px;
}

.toc strong {
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.toc ul {
    list-style:none;
    padding:0;
    margin:12px 0 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px 20px;
}

.toc li {
    margin:0;
    font-size:14px;
    line-height:1.6;
}

.next-guide {
    margin-top:40px;
    padding:22px;
    background:var(--sage);
    border-radius:8px;
}

.search-result {
    padding:22px 0;
    border-bottom:1px solid var(--line);
}

.search-result h2 {
    font-size:27px;
    margin:0 0 10px;
}

.search-result p {
    margin:0;
}

.hosp-list li {
    padding:18px 0;
    border-bottom:1px solid var(--line);
}

@media(max-width:1000px) {
    .wrap {
        width:calc(100% - 48px);
    }

    .main-nav {
        gap:16px;
    }

    .main-nav a {
        font-size:12px;
    }

    .hero {
        gap:35px;
    }

    .hero-art {
        min-height:380px;
        padding:24px;
    }

    .reading-layout {
        gap:35px;
        grid-template-columns:210px minmax(0,1fr);
    }

    .journey-card {
        padding:22px;
    }

}

@media(max-width:760px) {
    .wrap {
        width:calc(100% - 36px);
    }

    .topline {
        font-size:10px;
    }

    .topline .wrap>span:last-child {
        display:none;
    }

    .header-row {
        min-height:83px;
        flex-wrap:wrap;
        gap:0;
        padding:18px 0;
    }

    .brand strong {
        font-size:20px;
    }

    .brand small {
        font-size:9px;
    }

    .menu-toggle {
        display:block;
        padding:9px 14px;
        border:1px solid #b4c8bc;
        border-radius:5px;
        background:transparent;
        color:var(--ink);
        font-size:14px;
    }

    .main-nav {
        width:100%;
        flex-wrap:wrap;
        gap:8px 22px;
        padding-top:15px;
    }

    .js .main-nav:not(.is-open) {
        display:none;
    }

    .main-nav a {
        font-size:14px;
    }

    .hero {
        grid-template-columns:1fr;
        padding:40px 0 25px;
        gap:30px;
    }

    .hero h1 {
        font-size:47px;
        max-width:540px;
    }

    .hero-copy>p {
        font-size:17px;
    }

    .hero-art {
        min-height:230px;
        border-radius:100px 100px 10px 10px;
        align-items:flex-end;
        padding:24px;
    }

    .art-caption {
        width:65%;
        padding:18px;
    }

    .art-caption p {
        font-size:24px;
    }

    .art-stem {
        left:25%;
        top:25px;
    }

    .art-sun {
        top:20px;
        right:28px;
        width:60px;
        height:60px;
    }

    .doctor-strip {
        align-items:flex-start;
        font-size:12px;
    }

    .doctor-seal {
        flex-shrink:0;
    }

    .section {
        padding:37px 0;
    }

    .section-heading {
        display:block;
    }

    .section-heading p {
        margin-top:12px;
    }

    .journey-grid,.extra-grid,.footer-grid {
        grid-template-columns:1fr;
        gap:17px;
    }

    .journey-card {
        padding:24px;
    }

    .card-top {
        margin-bottom:16px;
    }

    .journey-card p {
        margin-bottom:18px;
    }

    .medication-band {
        padding:24px;
        display:block;
    }

    .medication-band a {
        display:inline-block;
        margin-top:17px;
    }

    .extra-grid {
        gap:35px;
    }

    .reading-layout {
        display:flex;
        flex-direction:column;
        gap:25px;
        padding-top:28px;
    }

    .guide-nav {
        position:static;
        width:100%;
        order:2;
        border-top:1px solid var(--line);
        padding-top:25px;
    }

    .article {
        order:1;
    }

    .toc ul {
        grid-template-columns:1fr;
    }

    .page-title {
        padding:28px 0 32px;
    }

    .article p,.article li {
        font-size:16px;
    }

    .article>p:first-child {
        font-size:18px;
    }

    .article iframe {
        min-height:210px;
    }

    .footer-grid {
        gap:24px;
    }

    .footer-grid p {
        margin-bottom:0;
    }

}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }

    * {
        transition:none!important;
    }

}

@media print {
    .topline,.main-nav,.menu-toggle,.guide-nav,.site-footer,.print-button,.toc,.next-guide,.breadcrumb {
        display:none!important;
    }

    .wrap {
        width:100%;
    }

    .reading-layout {
        display:block;
    }

    .article {
        max-width:none;
    }

    .article .toggle-panel[hidden] {
        display:block!important;
    }

    .article details {
        break-inside:avoid;
    }

    .page-title {
        background:white;
        padding:20px 0;
    }

    .header-row {
        min-height:60px;
    }

    body {
        font-size:12pt;
        color:#000;
        background:white;
    }

    .article p,.article li {
        font-size:11pt;
    }

    .article h2 {
        font-size:20pt;
    }

    .article iframe {
        display:none;
    }

}


/* Give video titles their own wrapping caption and preserve widescreen proportions. */
.article .wp-block-columns:has(.wp-block-embed) {
    display:block;
}

.article .wp-block-embed {
    margin:24px 0 32px;
    width:100%;
    max-width:680px!important;
}

.article .syd-video-title {
    display:block;
    font-size:19px;
    font-weight:600;
    line-height:1.5;
    color:var(--ink);
    text-align:left;
    margin:0 0 12px;
    white-space:normal;
    overflow-wrap:anywhere;
}

.article .wp-block-embed__wrapper {
    position:relative;
    aspect-ratio:16/9;
    height:auto;
    min-height:0;
}

.article .wp-block-embed__wrapper:before {
    display:none!important;
}

.article .wp-block-embed__wrapper iframe {
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    min-height:0;
    border:0;
    border-radius:6px;
}


/* Shared search: available immediately on the homepage and in guide sidebars. */
.search-form {
    display: block;
}

.search-form .search-label {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
}

.search-fields {
    display: flex;
    gap: 8px;
}

.search-fields input {
    font-size: 16px;
    min-height: 46px;
}

.search-fields button {
    min-height: 46px;
    padding: 10px 15px;
    font-size: 14px;
}

.home-search {
    padding: 10px 0 0;
}

.home-search .search-form {
    display: flex;
    justify-content: flex-end;
    margin: 0;
}

/* Keep the accessible label while letting the compact field identify itself visually. */
.home-search .search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.home-search .search-fields {
    width: min(350px, 100%);
    gap: 6px;
}

.home-search .search-fields input {
    min-height: 40px;
    padding: 7px 10px;
    background: transparent;
    border-color: var(--line);
}

.home-search .search-fields button {
    min-height: 40px;
    padding: 7px 12px;
    background: var(--sage);
    color: var(--ink);
    font-size: 13px;
}

.home-search .search-fields button:hover {
    background: #dce7dc;
}


/* Equal-size audience tabs; a warm berry and peach accent identifies Children. */
.article .wp-block-buttons .wp-block-button {
    margin: 0;
}

.article .wp-block-buttons .wp-block-button__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    min-height: 52px;
    padding: 12px 24px;
    border-radius: 6px !important;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    box-sizing: border-box;
}

.article .kids-button .wp-block-button__link {
    background: #f9e2d7 !important;
    color: #743c52 !important;
    border-color: #d5a8b5;
}

.article .kids-button .wp-block-button__link::after {
    content: '';
    position: absolute;
    top: 7px;
    right: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c08747;
}

.article .kids-button .wp-block-button__link:hover {
    background: #f5d1c7 !important;
}

.article .kids-button .wp-block-button__link[aria-selected=true] {
    background: #80475b !important;
    color: #fff !important;
    border-color: #80475b;
}

.article .kids-button .wp-block-button__link[aria-selected=true]::after {
    background: #f6d68b;
}


/* Restrained family palette: the main typefaces, spacing and card shapes stay consistent. */
.article .kids-zone {
    background: #faf5ee !important;
    border-color: #e5d9cd;
    border-radius: 10px !important;
    padding: 28px !important;
}

.children-intro {
    padding: 0 0 24px;
    margin-bottom: 28px;
    border-bottom: 1px solid #e5d9cd;
}

.children-intro .eyebrow {
    color: #80475b;
    margin-bottom: 12px;
}

.children-intro .eyebrow::before {
    background: #c08747;
    box-shadow: 11px -4px 0 #d7b9c5;
    margin-right: 10px;
}

.article .children-intro h2 {
    margin: 0 0 12px;
    color: #743c52;
    font-size: 32px;
}

.article .children-intro p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
}

.article .kids-zone h2 {
    color: #743c52;
}

.article .kids-zone ul {
    padding: 18px 22px 18px 38px;
    background: #fffdf9;
    border: 1px solid #e5d9cd;
    border-radius: 8px;
}

.article .kids-zone li::marker {
    color: #9d6556;
}

@media (max-width: 760px) {
    .home-search .search-fields {
        width: min(350px, 100%);
    }

    .home-search .search-fields input,
    .home-search .search-fields button {
        min-height: 44px;
    }

    .article .kids-zone {
        padding: 20px !important;
    }

    .article .children-intro h2 {
        font-size: 28px;
    }

}

@media print {
    .home-search, .article .wp-block-buttons {
        display: none !important;
    }

    .article .wp-block-embed__wrapper {
        display: none;
    }

}