/* PHE content components (tables, notices, forms, service lists, modals). Layout/typography come from style.css */
/* Colours and sizes come from the token block in style.css */
/*- end--------------------------- */

table {
	width: 100%;
	text-align: left;
}

th, td {
	padding: 10px 10px;
	border: thin solid var(--dbim-grey-02);
	vertical-align:top;
}

th {
	color: var(--dbim-black);
	background: var(--dbim-azureish-white) none repeat-x scroll left top;
}

td {
	border-bottom: 1px solid var(--dbim-grey-01);
}


a.button {
	background-color: var(--dbim-wintergreen-dream);
	color: var(--dbim-white);
	display: inline-block;
	padding: 2px;
	border: 1px solid var(--dbim-wintergreen-dream);
	text-shadow: 1px 1px 0 var(--dbim-wintergreen-dream);
	border-radius: 5px;
	text-decoration: none;
	text-transform: uppercase;
}


fieldset {
	display: block;
	border: none;
	border-top: 1px solid var(--dbim-grey-01);
}

fieldset legend {
	font-weight: var(--dbim-font-weight-bold);
	font-size: var(--dbim-fs-p2);
	padding-right: 10px;
	color: var(--dbim-text-secondary);
}

fieldset form {
	padding-top: 15px;
}

fieldset p label {
	float: left;
	width: 150px;
}

form input, form select, form textarea {
	padding: 5px;
	color: var(--dbim-text-secondary);
	border: 1px solid var(--dbim-grey-01);
	border-right:1px solid var(--dbim-grey-01);
	border-bottom:1px solid var(--dbim-grey-01);
	background-color:var(--dbim-white);
	font-family: inherit;
	font-size: inherit;
}

form input.formbutton {
	border: none;
	background: var(--dbim-black);
	color: var(--dbim-white);
	font-weight: bold;
	padding: 6px 10px;
	font-size: var(--dbim-fs-p2);
	letter-spacing: 1px;
	width: auto;
	overflow: visible;
}

form.searchform input {
  font-size: inherit;
    padding: 6px;
}

form.searchform p {
	margin: 5px 0;
}


span.required {
	color: var(--dbim-coral-red);
}

.news {
	position: relative;
	padding: 5px 7px 5px 9px;
	width: 98%;
	border: 1px solid var(--dbim-grey-01);
	background-color:var(--dbim-azureish-white-bg);
}


.new-highlight {
    background-color: var(--dbim-coral-red);
    color: var(--dbim-white);
    font-size: var(--dbim-fs-small);
    font-weight: bold;
    padding: 3px 7px;
    border-radius: 3px;
    margin-right: 8px;
    display: inline-block;
}

.citizen-highlight {
    color: var(--dbim-powder-blue);
    font-weight: bold;
    position: relative;
    display: inline-block;
    padding: 2px 4px;
}

.citizen-highlight {
    color: var(--dbim-powder-blue);
    font-weight: 700;
    display: inline-block;
    position: relative;
    animation: serviceHighlight 1.8s ease-in-out infinite;
}

@keyframes serviceHighlight {
    0%, 100% {
        color: var(--dbim-powder-blue);
        text-shadow: 0 0 0 transparent;
        transform: translateY(0);
    }

    50% {
        color: var(--dbim-columbia-blue);
        text-shadow: 0 0 6px rgba(82, 121, 215, 0.45);
        transform: translateY(-2px);
    }
}


/* =========================================
   SERVICES
   ========================================= */

   .service-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 15px 5px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--dbim-grey-01);
}

.service-content {
    flex: 1;
}

.service-name {
    line-height: 1.5;
    margin-bottom: 10px;
}

.service-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.apply-btn,
.how-to-btn {
    display: inline-block;
    padding: 7px 14px;
    font-size: var(--dbim-fs-caption);
    font-weight: bold;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

.apply-btn {
    background: var(--dbim-powder-blue);
    border: 1px solid var(--dbim-powder-blue);
    color: var(--dbim-white) !important;
}

.apply-btn:hover {
    background: var(--dbim-wintergreen-dream);
    border-color: var(--dbim-wintergreen-dream);
}

.how-to-btn {
    background: var(--dbim-surface-grey);
    border: 1px solid var(--dbim-grey-02);
    color: var(--dbim-text-secondary);
}

.how-to-btn:hover {
    background: var(--dbim-linen);
}


/* =========================================
   HOW TO APPLY POPUP
   ========================================= */

.how-to-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.65);
    padding: 40px 15px;
    box-sizing: border-box;
}

.how-to-modal.show {
    display: block;
}

.how-to-modal-content {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 20px auto;
    padding: 30px;
    background: var(--dbim-white);
    border-radius: 5px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}

.how-to-modal-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    padding-right: 35px;
}

.close-modal {
    position: absolute;
    right: 15px;
    top: 10px;
    border: 0;
    background: transparent;
    color: var(--dbim-text-secondary);
    font-size: var(--dbim-fs-h1-md);
    line-height: 1;
    cursor: pointer;
}

.close-modal:hover {
    color: var(--dbim-black);
}


/* Selected service */

.selected-service-box {
    background: var(--dbim-azureish-white-bg);
    border-left: 4px solid var(--dbim-powder-blue);
    padding: 15px;
    margin-bottom: 25px;
    line-height: 1.5;
}

#selectedServiceName {
    margin-top: 6px;
    font-weight: bold;
}


/* Steps */

.application-step {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 22px;
}

.step-number {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--dbim-powder-blue);
    color: var(--dbim-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.step-content {
    flex: 1;
}

.step-content h3 {
    margin: 0 0 7px 0;
}

.step-content p {
    margin: 5px 0 10px 0;
    line-height: 1.5;
}


/* Registration */

.registration-link {
    display: inline-block;
    padding: 7px 12px;
    background: var(--dbim-powder-blue);
    color: var(--dbim-white) !important;
    text-decoration: none;
    border-radius: 3px;
}

.registration-link:hover {
    background: var(--dbim-wintergreen-dream);
}


/* Navigation path */

.navigation-path {
    display: inline-block;
    padding: 10px 12px;
    background: var(--dbim-surface-grey);
    border: 1px solid var(--dbim-grey-01);
    font-weight: bold;
}


/* Exact service name to search */

.service-search-name {
    padding: 12px 15px;
    background: var(--dbim-azureish-white-bg);
    border: 1px solid var(--dbim-columbia-blue);
    font-weight: bold;
    line-height: 1.5;
}


/* Modal footer */

.modal-footer {
    text-align: right;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid var(--dbim-grey-01);
}

.close-modal-btn {
    padding: 8px 18px;
    border: 1px solid var(--dbim-grey-02);
    background: var(--dbim-surface-grey);
    cursor: pointer;
    border-radius: 3px;
}

.close-modal-btn:hover {
    background: var(--dbim-linen);
}


/* Mobile */

@media screen and (max-width: 600px) {

    .service-item {
        flex-direction: column;
    }

    .service-actions {
        margin-top: 8px;
    }

    .how-to-modal {
        padding: 15px 10px;
    }

    .how-to-modal-content {
        padding: 20px;
        margin: 10px auto;
    }

    .application-step {
        gap: 10px;
    }
}

/* ===== PHE layout overrides on the DBIM base ===== */
/* Header: long department name must wrap instead of running under the search box */
header.main-header .ministry-name,
.main-header .ministry-name { white-space: normal; font-size: clamp(1.8rem, 1vw + 0.9rem, 2.4rem); line-height: 1.25; }
.main-header .header-brand-inner { grid-template-columns: minmax(0, 1.2fr) minmax(22rem, .8fr) minmax(8rem, .4fr); }

/* Content width aligned with the header (132rem) */
.waw .custom-container { max-width: 132rem; margin: 0 auto; padding: 0 clamp(1.2rem, 2vw, 2.4rem); }
.waw .grid { display: block; padding: 1rem 0; }
.waw .grid > * { min-width: 0; }
.waw .grid img { max-width: 100%; height: auto; }



/* Heading sizes: see the token block and base rules in style.css */

/* ===== Homepage quick links ===== */
.phe-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 1.6rem; margin-top: 3rem; }
.phe-quick h3 { margin: 0 0 1rem; font-size: var(--dbim-fs-h4); color: var(--dbim-wintergreen-dream); border-bottom: 3px solid var(--dbim-powder-blue); padding-bottom: .6rem; }
.phe-quick > div { background: var(--dbim-azureish-white-bg); border-radius: 8px; padding: 1.6rem; }
.phe-quick ul { list-style: none; margin: 0; padding: 0; }
.phe-quick li a { display: block; padding: .7rem 0; border-bottom: 1px dashed var(--dbim-columbia-blue); color: var(--dbim-deep-earthy-brown); text-decoration: none; }
.phe-quick li a:hover, .phe-quick li a:focus { color: var(--dbim-powder-blue); text-decoration: underline; }
.explore_head.left { text-align: left; }


/* ===== Site search ===== */
.site-search-form { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.site-search-form input[type=search] { flex: 1 1 28rem; padding: .9rem 1.2rem; border: 2px solid var(--dbim-grey-01); border-bottom: 3px solid var(--dbim-wintergreen-dream); border-radius: 8px 8px 0 0; font-size: var(--dbim-fs-p1); }
.site-search-form select, .site-search-form button { padding: .9rem 1.4rem; font-size: var(--dbim-fs-label); border: 1px solid var(--dbim-wintergreen-dream); border-radius: 4px; background: var(--dbim-white); color: var(--dbim-wintergreen-dream); }
.site-search-form button { background: var(--dbim-wintergreen-dream); color: var(--dbim-white); font-weight: 600; cursor: pointer; }
.search-result { padding: 1.2rem 0; border-bottom: 1px solid var(--dbim-azureish-white); }
.search-result a { font-size: var(--dbim-fs-h4); font-weight: 600; color: var(--dbim-powder-blue); }
.search-result p { margin: .4rem 0 0; font-size: var(--dbim-fs-label); }
.search-result small { color: var(--dbim-grey-03); }
mark { background: var(--dbim-azureish-white); color: var(--dbim-deep-earthy-brown); }





/* ===== Full-width layout ===== */
header.main-header .header-brand-inner,
footer .footerbox .container { max-width: none !important; width: 100%; padding-left: var(--phe-gutter); padding-right: var(--phe-gutter); }
.waw .custom-container { max-width: none; padding-left: var(--phe-gutter); padding-right: var(--phe-gutter); }

/* breadcrumb strip on inner pages (replaces the old blue banner) */
.phe-breadcrumb { background: var(--dbim-azureish-white-bg); border-bottom: 1px solid var(--dbim-azureish-white); }
.phe-breadcrumb-inner { padding: .9rem var(--phe-gutter); font-size: var(--dbim-fs-p2); color: var(--dbim-deep-earthy-brown); }
.phe-breadcrumb a { color: var(--dbim-powder-blue); }


/* ===== Announcements ticker (scrolling strip, pausable) ===== */
.phe-ticker { display: flex; align-items: center; gap: 1.2rem; background: var(--dbim-azureish-white-bg); border-bottom: 1px solid var(--dbim-azureish-white); padding: .8rem var(--phe-gutter); }
.phe-ticker-label { flex: 0 0 auto; background: var(--dbim-wintergreen-dream); color: var(--dbim-white); font-weight: 600; font-size: var(--dbim-fs-p2); padding: .4rem 1.2rem; border-radius: 4px; }
.phe-ticker-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.phe-ticker-list { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: phe-scroll var(--ticker-seconds, 60s) linear infinite; }
.phe-ticker-list.is-paused { animation-play-state: paused; }
.phe-ticker-list.is-static { animation: none; }
.phe-ticker-viewport:has(.is-static) { overflow-x: auto; }
.phe-ticker-list li { flex: 0 0 auto; white-space: nowrap; font-size: var(--dbim-fs-label); margin-right: 4rem; }
.phe-ticker-list li::after { content: "\2022"; margin-left: 4rem; color: var(--dbim-powder-blue); }
.phe-ticker-list a { color: var(--dbim-deep-earthy-brown); text-decoration: none; }
.phe-ticker-list a:hover, .phe-ticker-list a:focus { color: var(--dbim-powder-blue); text-decoration: underline; }
@keyframes phe-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.phe-ticker-btn { flex: 0 0 auto; border: 1px solid var(--dbim-wintergreen-dream); background: var(--dbim-white); color: var(--dbim-wintergreen-dream); border-radius: 4px; padding: .3rem 1.2rem; font-size: var(--dbim-fs-caption); cursor: pointer; }
.phe-offerings h2 { margin: 3rem 0 0; color: var(--dbim-wintergreen-dream); }
.phe-offerings .phe-quick { margin-top: 1.2rem; }
.phe-more { display: inline-block; margin-top: 1rem; padding: .5rem 1.4rem; border: 1px solid var(--dbim-powder-blue); border-radius: 4px; color: var(--dbim-powder-blue); text-decoration: none; font-weight: 600; font-size: var(--dbim-fs-p2); }
.phe-more:hover, .phe-more:focus { background: var(--dbim-powder-blue); color: var(--dbim-white); }


/* ===== Browse by persona ===== */
.phe-personas h2 { margin: 3rem 0 1.2rem; color: var(--dbim-wintergreen-dream); }
.persona-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: 1.6rem; }
.persona-card { display: flex; flex-direction: column; gap: .6rem; padding: 1.8rem; border: 1px solid var(--dbim-columbia-blue); border-left: 6px solid var(--dbim-wintergreen-dream); border-radius: 8px; background: var(--dbim-white); color: var(--dbim-deep-earthy-brown); text-decoration: none; }
.persona-card strong { font-size: var(--dbim-fs-h4); color: var(--dbim-wintergreen-dream); }
.persona-card span { font-size: var(--dbim-fs-label); }
.persona-card:hover, .persona-card:focus { background: var(--dbim-azureish-white-bg); text-decoration: none; }
.persona-tabs { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.persona-tab { padding: .8rem 1.6rem; border: 1px solid var(--dbim-wintergreen-dream); border-radius: 4px; color: var(--dbim-wintergreen-dream); text-decoration: none; font-weight: 600; }
.persona-tab.active, .persona-tab:hover, .persona-tab:focus { background: var(--dbim-wintergreen-dream); color: var(--dbim-white); }
.persona-filter { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.2rem 0; }
.persona-filter button { padding: .5rem 1.4rem; border: 1px solid var(--dbim-powder-blue); border-radius: 20px; background: var(--dbim-white); color: var(--dbim-powder-blue); font-size: var(--dbim-fs-p2); cursor: pointer; }
.persona-filter button[aria-pressed="true"] { background: var(--dbim-powder-blue); color: var(--dbim-white); }
.persona-list { list-style: none; margin: 0; padding: 0; }
.persona-list li { padding: 1rem 0; border-bottom: 1px solid var(--dbim-azureish-white); }
.persona-list a { font-size: var(--dbim-fs-lead); font-weight: 600; color: var(--dbim-powder-blue); }
.persona-list small { margin-left: .8rem; padding: .2rem .8rem; border-radius: 4px; background: var(--dbim-azureish-white-bg); color: var(--dbim-deep-earthy-brown); }

/* ===== Photo gallery thumbnails (the old pages marked every thumbnail 100x75 px) ===== */
.waw .grid a.highslide img { width: 24rem; max-width: 100%; height: 18rem; object-fit: cover; border-radius: 6px; margin: 0 1.2rem 1.2rem 0; padding: 0; vertical-align: top; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.waw .grid a.highslide:hover img, .waw .grid a.highslide:focus img { box-shadow: 0 2px 10px rgba(var(--dbim-shadow-rgb), .5); }

/* ===== Page structure: clear h1 > h2 > h3 hierarchy, readable sections (DBIM type scale 36 / 24 / 20) ===== */
.waw .grid > h2, .waw .grid h2:not(.title) { font-size: var(--dbim-fs-h2); font-weight: 700; color: var(--dbim-wintergreen-dream); margin: 3.2rem 0 1.4rem; padding-bottom: .8rem; border-bottom: 3px solid var(--dbim-azureish-white); }
.waw .grid h3:not(.title) { font-size: var(--dbim-fs-h3); font-weight: 600; color: var(--dbim-powder-blue); margin: 2.4rem 0 1rem; }
.waw .grid h4 { font-size: var(--dbim-fs-lead); font-weight: 600; color: var(--dbim-deep-earthy-brown); margin: 1.8rem 0 .8rem; }
.waw .grid p, .waw .grid li { line-height: 1.7; }
.waw .grid p { margin-bottom: 1.4rem; }
.phe-offerings h2, .phe-personas h2 { font-size: var(--dbim-fs-h2); padding-bottom: .8rem; border-bottom: 3px solid var(--dbim-azureish-white); margin: 4rem 0 1.6rem; }

/* notice board */
.news { width: 100%; padding: 2rem 2.4rem; border: 1px solid var(--dbim-azureish-white); border-left: 6px solid var(--dbim-wintergreen-dream); border-radius: 8px; background-color: var(--dbim-azureish-white-bg); }
h2.title, h3.title { font-size: var(--dbim-fs-h2); font-weight: 700; color: var(--dbim-wintergreen-dream); margin: 0 0 1.4rem; }
.news ol { margin: 0; padding-left: 2.4rem; }
.news ol > li { padding: 1rem 0; border-bottom: 1px solid var(--dbim-azureish-white); }
.news ol > li:last-child { border-bottom: 0; }
.news a { color: var(--dbim-powder-blue); }

/* tables: tidy borders, header row, zebra rows, scroll on small screens */
.waw .grid table { border-collapse: collapse; margin: 1.6rem 0; }
.waw .grid th, .waw .grid td { border: 1px solid var(--dbim-azureish-white); padding: 1rem 1.2rem; }
.waw .grid th { background: var(--dbim-wintergreen-dream); color: var(--dbim-white); font-weight: 600; }
.waw .grid tbody tr:nth-child(even) td { background: var(--dbim-azureish-white-bg); }
@media (max-width: 767.98px) { .waw .grid table { display: block; overflow-x: auto; } }

/* section spacing and footer heading look the same as before */
footer .footerbox h2.usefula { font-size: var(--dbim-fs-p1); line-height: 22px; }


/* ===== Persona illustrations (optional images from the DBIM Toolkit) ===== */
.persona-card { flex-direction: row; align-items: center; gap: 1.6rem; }
.persona-text { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.persona-img { flex: 0 0 auto; width: 9.6rem; height: 9.6rem; object-fit: contain; border-radius: 6px; background: var(--dbim-white); }
.persona-img[hidden] { display: none; }

.persona-head { display: flex; align-items: center; gap: 2rem; margin-bottom: 1rem; }
.persona-head h2 { margin-top: 0; }
.persona-hero { flex: 0 0 auto; width: 9.6rem; height: 9.6rem; object-fit: contain; }


/* ===== Left sidebar on inner pages (Navigation, Documents, Archive) ===== */
.waw .waw-inner { align-items: flex-start; gap: 2.4rem; }
.waw .waw-inner > .waw-left { flex: 1 1 0; min-width: 0; padding-left: 0; padding-right: 0; }
.phe-sidebar { flex: 0 0 26rem; width: 26rem; max-width: 100%; font-size: var(--dbim-fs-label); }
.phe-sidebar a { color: var(--dbim-deep-earthy-brown); text-decoration: none; }
.phe-sidebar ul { list-style: none; margin: 0 0 2rem; padding: 0; }
.phe-sidebar .heading { margin: 0; padding: .9rem 1.2rem; background: var(--dbim-wintergreen-dream); color: var(--dbim-white); font-size: var(--dbim-fs-lead); font-weight: 600; }
.phe-sidebar li a { display: block; padding: .9rem 1.2rem; border-bottom: 1px dashed var(--dbim-columbia-blue); background: var(--dbim-white); }
.phe-sidebar li a:hover, .phe-sidebar li a:focus { background: var(--dbim-azureish-white-bg); color: var(--dbim-powder-blue); }
.phe-sidebar img { max-width: 100%; height: auto; display: block; margin-top: 1rem; }
@media (max-width: 991.98px) {
  .waw .waw-inner { flex-direction: column; }
  .phe-sidebar { flex-basis: auto; width: 100%; }
}